jQuery fadeOut,replaceWith,animate几乎正常工作

Question

我试图完成以下任务:1.点击,有一个div = id ="fader"fadeout 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()将其链接,返回原始对象,而不是刚刚创建的对象.