Проблема с анимацией jQuery

Question

У меня проблема с анимацией в jQuery с использованием ajax.

При нажатии кнопки (фактически тега) я вызываю метод ajax, и в параметре успеха записывается следующее:

success: function(msg) {
  $('.ContentsMainRight').children().fadeOut(500, function() {
    $('.ContentsMainRight').html(msg.d);
    $('.ContentsMainRight').children().fadeIn(1000);
  });
},

Это имеет следующий результат.

Содержимое div исчезает за 500 мс, как и должно быть. Затем html-содержимое div меняется, но тогда последняя часть не сработала, как я надеялся. HTML-код, возвращаемый методом ajax, включает некоторый текст внутри тега

и изображение внутри тега. В результате текст автоматически отображается мгновенно, без исчезновения, но вставляемый img исчезает через 1 секунду. Почему текст и изображение обрабатываются по-разному?

-daemon

Answer 1

Скорее всего, .children() ссылается на элементы, а не на текстовые узлы. Это означает, что применяемые к ним стили не будут сохраняться при изменении текста, то есть текст не будет иметь display:none или visibility:hidden (в зависимости от того, что применяется).

Почему бы вам просто не исчезнуть .ContentsMainRight div?

success: function(msg) {
  $('.ContentsMainRight').fadeOut(500, function() {
    $('.ContentsMainRight').html(msg.d);
    $('.ContentsMainRight').fadeIn(1000);
  });
},

Answer 2

Попробуйте:

success: function(msg) {
  $('.ContentsMainRight').fadeOut(500, function() {
    $('.ContentsMainRight').html(msg.d);
    $('.ContentsMainRight').fadeIn(1000);
  });
},

В основном проблема заключается в том, что вы скрываете children , а затем заменяете дочерние элементы своим вызовом html(). Замененный контент не скрыт, поэтому он сразу виден, и это то, что вы видите.

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

Чтобы дать вам пример того, что я имею в виду, предположим:

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

Сравните:

$("ul").fadeOut(500, function() {
  alert("replacing");
  $(this).html("<li>four</li><li>five</li><li>six</li>").fadeIn(500);
});

с:

$("ul").children().fadeOut(500, function() {
  alert("replacing"); // this will be called three times
  $(this).html("<li>four</li><li>five</li><li>six</li>").children().fadeIn(500);
});

или чтобы было еще яснее:

$("ul").children().fadeOut(500, function() {
  alert("replacing"); // this will be called three times
  $(this).append("<li>four</li><li>five</li><li>six</li>").children().fadeIn(500);
});