Question

我在使用ajax的jQuery中遇到动画问题。

单击一个按钮（实际上是一个标签），我调用一个ajax方法，并在success参数中写入以下内容：

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

这具有以下结果。

div的内容按预期消失超过500毫秒。然后交换div的html内容，但最后一部分没有像我希望的那样工作。 ajax方法返回的html包含

标记内的一些文本和标记内的图像。结果是文本会立即自动显示，没有淡入淡出，但放置的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);
  });
},

基本上问题是您隐藏孩子，然后用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);
});

jQuery动画问题

2 个答案: