fadeIn не работает с .append () - PullRequest
Новая
       19

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

1 голос
/ 21 февраля 2010

Я собрал какое-то исчезающее меню, если вы хотите так его назвать. Проблема, которую я имею, состоит в том, что все прекрасно исчезает, кроме изображения, которое я добавляю в конец ссылок. Он прекрасно гаснет, но я никак не могу заставить его работать. 

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

});

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

1 Ответ

1 голос
/ 21 февраля 2010

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

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

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

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

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

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

$(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-коду, нет причин добавлять его динамически, если только это не сценарий обезжиривания или что-то в этом роде.

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

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

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