jQuery动画的问题

我对使用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在标记中包含一些文本，在标记中包含一个图像。结果是，文本立即自动显示，没有fadein，但输入的img会在1秒以上消失。为什么文本和图像的处理方式不同

-守护进程尝试：

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”）.fadeOut（500，函数（）{
警报（“替换”）；
$（this.html（“
four
five
six
”）.fadeIn（500）；
});

与：

$（“ul”）.children（）.fadeOut（500，function（））{
警报（“替换”）；//这将被调用三次
$（this.html（“
four
five
six
”）.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);
});

$（“ul”）.children（）.fadeOut（500，function（））{
警报（“替换”）；//这将被调用三次
$（此）.append（“
4
5
6
”）.children（）.fadeIn（500）；
});

试试：

基本上，问题是隐藏子对象，然后用

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”）.fadeOut（500，函数（）{
警报（“替换”）；
$（this.html（“
four
five
six
”）.fadeIn（500）；
});

与：

$（“ul”）.children（）.fadeOut（500，function（））{
警报（“替换”）；//这将被调用三次
$（this.html（“
four
five
six
”）.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);
});

$（“ul”）.children（）.fadeOut（500，function（））{
警报（“替换”）；//这将被调用三次
$（此）.append（“
4
5
6
”）.children（）.fadeIn（500）；
});

最有可能的是，

.children（）

引用元素，而不是文本节点。这意味着当文本更改时，应用于它们的样式将不会保持不变，这意味着文本将不会具有

显示：无

或

可见性：隐藏

（以应用的为准）

你为什么不淡出

.ContentsMainRight

div

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

---

很可能，

.children（）

引用的是元素，而不是文本节点。这意味着当文本更改时，应用于它们的样式将不会保持不变，这意味着文本将不会具有

显示：无

或

可见性：隐藏

（以应用的为准）

你为什么不淡出

.ContentsMainRight

div

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

---

嗨，安迪。看来问题正如你所说。即使我完全删除了fadeIn调用，我输入的文本仍然可见。我没有淡出整个div的原因是，这意味着div的背景图像也会淡出，这不是我想要的。如果我在有背景的div中放第二个div，然后淡出该div，并替换该div中的内容，而不是div中的实际元素，会有帮助吗？我尝试在ContentsMainRight div中放一个新div，效果很好。谢谢你对这个问题的见解。嗨，安迪。看来问题正如你所说。即使我完全删除了fadeIn调用，我输入的文本仍然可见。我没有淡出整个div的原因是，这意味着div的背景图像也会淡出，这不是我想要的。如果我在有背景的div中放第二个div，然后淡出该div，并替换该div中的内容，而不是div中的实际元素，会有帮助吗？我尝试在ContentsMainRight div中放一个新div，效果很好。谢谢你对这个问题的见解。嗨，克莱特斯。我只有一个ContentsMainRight类的元素，因此替换其中的几个元素不是问题，而是替换的内容是否可见才是问题所在。谢谢你告诉我（明显的）原因。你的例子很好。我现在修复了这个问题，在我的内容中添加了另一个div，即右div，然后在不呼叫孩子的情况下将该div淡入淡出。我是jQuery的新手，所以我非常感谢您的帮助：）嗨，克莱特斯。我只有一个ContentsMainRight类的元素，因此替换其中的几个元素不是问题，而是替换的内容是否可见才是问题所在。谢谢你告诉我（明显的）原因。你的例子很好。我现在修复了这个问题，在我的内容中添加了另一个div，即右div，然后在不呼叫孩子的情况下将该div淡入淡出。我是jQuery的新手，因此我非常感谢您的帮助：）