jQuery obtenir nUne erreur lorsque vous essayez de définir la couleur de frontière (mais il fonctionne?)

Question

Je change la couleur de la bordure d'un objet via une animation:

$listItem.siblings('li').andSelf().find('img').animate({ 
      borderTopColor: defaultThumbBorderColor, 
      borderBottomColor: defaultThumbBorderColor, 
      borderLeftColor: defaultThumbBorderColor, 
      borderRightColor: defaultThumbBorderColor 
      }, 500); 

Dans Firefox, cela fonctionne. Cependant, je reçois cette erreur dans le journal de la console:

Warning: Expected number or percentage in rgb() but found 'NaN'. Error in parsing value for 'border-bottom-color'. Declaration dropped. 

Il semble que jQuery veut un certain nombre de ces propriétés. Mais même si je passe une chaîne ('rouge', par exemple) cela fonctionne, mais enregistre cette erreur.

Une idée pourquoi? Question bonus: Je n'arrive pas à appliquer les quatre couleurs de bordure avec une seule ligne via 'borderColor' ou 'border-color'. Est-ce la seule façon de faire cela comme ci-dessus où vous définissez la couleur individuelle de chacun des quatre côtés? Le problème que je rencontre avec ce qui précède est que cela fonctionne habituellement. Mais de temps à autre, il n'anime pas l'une des quatre frontières sur un élément apparemment aléatoire du tableau. Donc, un exemple de scénario: si j'ai 20 éléments, cela va animer les quatre bordures sur 18 des éléments, puis 3 des bordures sur 2 d'entre eux. Si c'est important, j'attache la bordure à une image. Peut-être que c'est le coupable? Je vais faire quelques tests ...

MISE À JOUR ... eh bien, ce n'est pas un problème si c'est spécifiquement une image. Je semble être un pépin de performance (peut-être navigateur? Peut-être jQuery?)

Si j'ai un groupe d'éléments dont j'ai besoin de changer les 4 couleurs de bordure à la fois, la plupart du temps cela fonctionne, mais peut-être 1 de 3 fois, 1 ou 2 des 20 éléments animeront seulement 3 de leurs frontières plutôt que les quatre. À ce stade, je pense que je dois juste remplir les divs et utiliser une couleur d'arrière-plan à la place.

Answer 1

Je suppose que vous utilisez le plugin officiel jQuery animate to color. Si vous vérifiez sa source, vous pouvez voir qu'il remplace les propriétés suivantes:

// We override the animation for all of these color styles 
jQuery.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor']) 

Ceci explique pourquoi ne borderColor anime pas toutes les frontières à la couleur spécifiée. En ce qui concerne le problème NaN, je pense que c'est un bug. J'ai eu le même problème, quand j'essayais d'animer environ 30 objets simultanément à une couleur de fond spécifique. Certaines animations s'arrêtaient juste au hasard. Une solution de contournement avec padding-and-background peut donc ne pas fonctionner.

Answer 2

la plupart du temps cela fonctionne, mais peut-être 1 nos 3 fois, 1 ou deux des 20 ou si des éléments ne seront animer 3 leurs frontières plutôt que les quatre.

J'avais le même problème.

Apparemment, il y avait un bug dans le plugin animations couleur qui est maintenant corrigé. (http://dev.jqueryui.com/ticket/4251)

Et voici les deux lignes qu'ils ont changé ... ils

http://dev.jqueryui.com/changeset/3269

J'ai ajouté les modifications ci-dessus au plugin et n'ont pas eu de problèmes avec elle depuis.

Espérons que cela est utile.

Travis