hover() backgroundColor problème

Question

 
$('li > a').hover(
    function(){ 
    $(this).animate({ 
    backgroundColor: '#2a639a', 
    color: '#fff' 
    },300).corner('5px'); 
    }, 
    function(){ 
    $(this).animate({ 
    background: 'transparent', 
    color: '#444' 
    },300); 
    } 
); 

Qu'est-ce qui ne va pas avec l'arrière-plan: 'transparent'? retourne blanc, pas transparent

Answer 1

chose importante à noter: Transparent en CSS est différent de 0% Opacité.

L'opacité peut être graduée, tandis que la transparence est activée ou désactivée. Par conséquent, vous ne pouvez pas animer un transparent à partir d'une couleur solide et attendre une transition en douceur. Si vous essayez, la plupart des navigateurs le traiteront en noir ou en blanc pour les besoins de l'animation, ce que je pense est ce que vous voyez ici. L'animation de l'opacité à la place peut vous faciliter la transition, bien qu'elle soit différente (pour commencer, elle affecte tout l'élément, pas seulement l'arrière-plan, plus les problèmes de compatibilité avec le navigateur).

Answer 2

Vous ne pouvez pas animer la propriété d'arrière-plan.

Peut-être que vous pouvez utiliser une image-objet et utiliser le BackgroundPosition Plugin

Answer 3

Il est impossible d'animer la couleur de fond uniquement avec jQuery. jQuery ne prend en charge que les valeurs numériques indiquées in the jQuery-API Vous pouvez utiliser jQuery UI pour animer la couleur d'arrière-plan.