Element qui change lors d'un hover

Bonjour

je souhaite créer un effet lors d'un hover en javascript. Je possède 2 type d'icone, une blanche, une en couleurs. Je voudrais que lorsque l'utilisateur passe la souris sur le lien englobant l'icone, l'icone passe en couleur et que lorsque l'utilisateur quitte le lien, l'icone pas en blanc

J'ai réussi à faire mon animation js avec le .css(), mais je souhaiterai la faire avec .animate() afin d'avoir un rendu plus fluide, et lorsque je remplace le .css() par un .animate() et que je rajoute la durée, il ne se passe plus rien du tout...

Voici le code js :

$(document).ready(function(){
  $('a.effect').mouseenter(function(){
    var white = $(this).find('.white');
    var color = $(this).find('.color');

    $(white).stop().css({'display':'none'});
    $(color).stop().css({'display':'block'});
  });

  $('a.effect').mouseleave(function(){
    var white = $(this).find('.white');
    var color = $(this).find('.color');

    $(white).stop().css({'display':'block'});
    $(color).stop().css({'display':'none'});
  });


});

Savez vous pourquoi ça ne fonctionne pas ? Car là, j'avoue ne pas comprendre

Merci d'avance
Modifié par conra59 (17 Dec 2016 - 14:41)

Et bien dans ce cas :

Il ne peut pas y avoir d'effet d'animation sur un display none, car l'élément se comporte dans un tout ou rien. Il vaudrait mieux alors jouer sur un effet d'opacité afin d'obtenir la possibilité d'un fondu.