fadeIn não funciona com .append()

Question

Eu montei uma espécie de menu esmaecido, se você quiser chamar assim.O problema que estou tendo é que tudo desaparece bem, exceto a imagem que estou anexando ao final dos links.Ele desaparece muito bem, mas não consigo fazer o fadeIn funcionar.

$(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);
    }
);

});

Alterar o tempo de fadeIn não faz nada e se você olhar um pouco você pode dizer que não está desaparecendo, mas apenas aparecendo.Tudo o resto está a funcionar bem.Se alguém tiver alguma ajuda eu realmente aprecio isso.Obrigado!

Answer 1

editar:original abaixo por razões históricas

Resolvi esse problema, você pode encontrar a solução emhttp://jsbin.com/hogantest/5e claro ver toda a fonte e brincar com ela em http://jsbin.com/hogantest/5/edit

Porque stop() não funciona com fadeIn() e fadeOut() há uma coisa estranha com as setas aparecendo se você mover o ponteiro do mouse rapidamente.Deixo a correção para o OP.

Aqui estavam os problemas e a solução.O problema 1 não estava usando o stop corretamente.Você deseja usar stop apenas no item de fade out.Isso interromperá o fade in e iniciará um fade out imediatamente.Além disso (como meu comentário original), você deseja parar primeiro e depois fazer o trabalho.

O problema 2 foi a adição dinâmica de imagens ao passar o mouse.CARAMBA!Adicione as imagens ocultas uma vez e apenas uma vez e manipule-as.

Aqui está a parte relevante do código revisado:

$(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);
    }
  );

});​

Como eu disse, ainda há uma solução - livre-se fadeIn() e fadeOut() e use animar para poder ligar stop().Eu também adicionaria a tag img ao código HTML original, não há razão para adicioná-la dinamicamente, a menos que seja um script de macaco lubrificante ou algo desse tipo.

resposta original

Isso é um palpite, é tarde, então não estou testando ...mova stop() antes que a imagem apareça.

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