FADEIN ne fonctionne pas avec .append ()

Question

Je mets ensemble un menu fading en quelque sorte si vous voulez appeler ça comme ça. Le problème que j'ai est tout disparaît bien, sauf l'image que je suis à la fin Annexer des des liens. Il disparaît très bien, mais je ne peux pas obtenir fadeIn travailler du tout.

$(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 une aide que je voudrais vraiment l'apprécier. Merci!

Answer 1

modifier: original ci-dessous pour des raisons historiques

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

Parce que stop() ne fonctionne pas avec fadeIn() et fadeOut() il y a un funkyness avec les flèches autour si vous coller déplacez le pointeur de la souris rapide. Je laisse le correctif pour l'OP.

Il y avait là les problèmes et les solutions. Problème 1 n'a pas été correctement avec arrêt. Vous voulez seulement utiliser arrêt sur le fondu élément. Cela arrêtera le fondu et commencer un fondu tout de suite. Aussi (comme mon commentaire initial) que vous voulez arrêter d'abord, puis faire le travail.

Problème 2 a été la dynamique en ajoutant des images dans le vol stationnaire. OUPS! Ajoutez les images cachées une seule fois, puis de les manipuler.

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 des fadeIn() et fadeOut() et utiliser Animate vous pouvez l'appeler ainsi stop(). Je voudrais ajouter aussi la balise img au code HTML d'origine, il n'y a aucune raison d'ajouter dynamiquement à moins que cela est un script de singe de 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 le fondu d'image.

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);
    },