fadeIn ne fonctionne pas avec .append()

Question

J'ai mis en place un menu qui s'estompe de la sorte si vous voulez l'appeler ainsi. Le problème que j'ai est que tout s'estompe, sauf l'image que j'ajoute à la fin des liens. Cela s'estompe, mais je n'arrive pas à faire fonctionner FadeIn.

$(document).ready(function() { 

$(".fade").hover(
    function() { 
     $(this).fadeIn(500).append($("IMAGE HERE")); 
     $(this).stop().animate({ 
      opacity: 1, 
      borderBottomColor: "#6BD8FF", 
      borderLeftColor: "#6BD8FF", 
      borderRightColor: "#6BD8FF", 
      borderTopColor: "#6BD8FF", 
      color: "#03A5DF", 
      backgroundColor: "#E3F8FF" 
     }, 500); 
    }, 
    function() { 
     $(this).find("img:last").fadeOut(200); 
     $(this).stop().animate({ 
      opacity: 1, 
      borderBottomColor: "#CCCCCC", 
      borderLeftColor: "#CCCCCC", 
      borderRightColor: "#CCCCCC", 
      borderTopColor: "#CCCCCC", 
      color: "#BBBBBB", 
      backgroundColor: "#F9F9F9" 
     }, 200); 
    } 
); 

}); 

Modification du temps fadeIn ne fait rien et si vous regardez un peu, vous pouvez dire que ce n'est pas la décoloration mais juste en apparaissant. Tout le reste fonctionne bien. Si quelqu'un a de l'aide, je l'apprécierais vraiment. Merci!

Answer 1

modifier: original ci-dessous pour des raisons historiques

J'ai ce problème résolu, vous pouvez trouver la solution à http://jsbin.com/hogantest/5 et bien sûr voir toutes les sources et jouer avec elle à http://jsbin.com/hogantest/5/edit

Parce que stop() ne fonctionne pas avec fadeIn() et fadeOut() il y a une folie avec les flèches qui traînent si vous déplacez le pointeur de la souris rapidement. Je laisse le correctif pour l'OP.

Voici les problèmes et la solution. Le problème 1 n'utilisait pas l'arrêt correctement. Vous ne voulez utiliser que l'arrêt sur l'élément de fondu. Cela va arrêter le fondu et commencer à disparaître tout de suite. Aussi (comme mon commentaire original) vous voulez arrêter d'abord puis faire le travail.

Problème 2 était l'ajout dynamique d'images dans le vol stationnaire. YIKES! Ajoutez les images cachées une fois et une seule fois, puis manipulez-les.

Voici la partie pertinente du code révisé:

$(document).ready(function() { 
    $(".fade").each(function() { 
    $(this).append($("<img style='float:right;' src='http://cu3ed.com/jqfade/img/plus.png' />")); 
    $(this).find("img:last").hide(); 
    }); 

    $(".fade").hover(
    function() { 
     var me = $(this); 

     me.find("img:last").fadeIn(500); 

     me.animate({ 
     opacity: 1, 
     borderBottomColor: "#6BD8FF", 
     borderLeftColor: "#6BD8FF", 
     borderRightColor: "#6BD8FF", 
     borderTopColor: "#6BD8FF", 
     color: "#03A5DF", 
     backgroundColor: "#E3F8FF" 
     }, 500); 
    }, 
    function() { 
     var me = $(this); 
     me.stop(); 
     me.find("img:last").fadeOut(200); 
     me.animate({ 
     opacity: 1, 
     borderBottomColor: "#CCCCCC", 
     borderLeftColor: "#CCCCCC", 
     borderRightColor: "#CCCCCC", 
     borderTopColor: "#CCCCCC", 
     color: "#BBBBBB", 
     backgroundColor: "#F9F9F9" 
     }, 200); 
    } 
); 

});​ 

Comme je l'ai dit il y a encore une solution - se débarrasser de fadeIn() et fadeOut() et l'utilisation Animer afin que vous puissiez appeler stop(). Je voudrais également ajouter la balise img au code html original, il n'y a aucune raison de l'ajouter dynamiquement, sauf s'il s'agit d'un script de singe graisse ou quelque chose de ce genre.

réponse originale

Ceci est une supposition, il est en retard, donc je ne suis pas le tester ... déplacer la butée() avant que l'image fondu.

function() { 
     var me = $(this); 
     me.stop(); 
     me.fadeIn(500).append($("<img class='plus' src='img/plus.png' />")); 
     me.animate({ 
      opacity: 1, 
      borderBottomColor: "#6BD8FF", 
      borderLeftColor: "#6BD8FF", 
      borderRightColor: "#6BD8FF", 
      borderTopColor: "#6BD8FF", 
      color: "#03A5DF", 
      backgroundColor: "#E3F8FF" 
     }, 500); 
    },