jquery - jQuery淡出，replaceWith，动画几乎可以工作

Question

我正在尝试完成以下操作： 1. 单击时，有一个 id="fader" 淡出的 div 2. 用新的 html 替换推子的 Html（这个新的 HTML 将出现在浏览器的折叠下方） 3. 将新的 HTML 动画到向上滑动到指定位置

第 1 步和第 2 步有效，第 3 步无效，我不知道为什么。

这是javascript：

$("#fader").fadeOut(1000, function() {
  $(this).replaceWith('<div id=\"fader\" style=\"margin-top:-500px;width:500px;height:400px;border:1px solid black;\">new div</div>', function() {
    $("#fader").animate({marginTop: "500px"});
  });
});

任何关于为什么 div 不会动画的想法将不胜感激，在此先感谢！

Answer 1

在您的情况下.replaceWith()没有回调，它具有与动画不同的签名。

试试这个：

$("#fader").fadeOut(1000, function() {
  $(this).replaceWith('<div id="fader" style="margin-top:-500px;width:500px;height:400px;border:1px solid black;">new div</div>');
  $("#fader").animate({marginTop: "500px"});
});

请注意，您不能链接它，.replaceWith()返回原始对象，而不是您刚刚创建的对象。