FadeIn не работает с .append()

Question

Я составил своего рода исчезающее меню, если хотите так его называть.Проблема, с которой я столкнулся, заключается в том, что все исчезает нормально, кроме изображения, которое я добавляю в конец ссылок.Он отлично затухает, но я вообще не могу заставить 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);
    }
);

});

Изменение времени постепенного исчезновения ничего не дает, и если вы посмотрите на него немного, вы увидите, что оно не исчезает, а просто появляется.Все остальное работает нормально.Если у кого-нибудь есть помощь, я был бы очень признателен.Спасибо!

Answer 1

редактировать:оригинал ниже по историческим причинам

Я решил эту проблему, вы можете найти решение на сайтеhttp://jsbin.com/hogantest/5и, конечно же, просмотреть весь исходный код и поиграть с ним на http://jsbin.com/hogantest/5/edit

Потому что stop() не работает с fadeIn() и fadeOut() есть странность: стрелки застревают, если вы быстро перемещаете указатель мыши.Я оставляю исправление для ОП.

Вот проблемы и решения.Проблема 1 заключалась в неправильном использовании остановки.Вы хотите использовать остановку только для элемента постепенного исчезновения.Это остановит появление и сразу же начнет затухание.Кроме того (как мой первоначальный комментарий) сначала нужно остановиться, а затем сделать работу.

Проблема 2 заключалась в динамическом добавлении изображений при наведении.УРА!Добавляйте изображения в скрытое один и только один раз, а затем манипулируйте ими.

Вот соответствующая часть пересмотренного кода:

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

});​

Как я уже сказал, решение еще есть — избавьтесь от fadeIn() и fadeOut() и используйте Animate, чтобы вы могли позвонить stop().Я бы также добавил тег img в исходный html-код, нет смысла добавлять его динамически, если только это не сценарий «жирной обезьяны» или что-то в этом роде.

оригинальный ответ

Это предположение, уже поздно, поэтому я не проверяю его...переместите stop() до того, как изображение исчезнет.

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