jQuery fadeOut，replaceWith，animate几乎正常工作 [英] jQuery fadeOut, replaceWith, animate almost working

问题描述

我正在尝试完成以下操作：
1.点击后，让div为id =faderfadeout
2.用新html替换推子的HTML（这个新的HTML将出现在折叠浏览器）
3.动画新HTML以滑动到指定位置

I am trying to accomplish the following: 1. On click, have a div with id="fader" fadeout 2. replaceHtml of fader with new html (this new HTML will appear below the fold of the browser) 3. Animate new HTML to slide up to the specified location

步骤1和2正在工作，第3步不是，我'我很难过。

Step 1 and 2 are working, step 3 is not and I'm stumped as to why.

这是javascript：

Here's the 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不会动画的想法都会受到高度赞赏，提前谢谢！

Any thoughts on why the div won't animate would be greatly appreciated, thanks in advance!

推荐答案

在你的情况下 .replaceWith（）没有回调，它的动画签名与动画不同。

In your case .replaceWith() has no callback, it's has a different signature than animations have.

请改为使用：

$("#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（）返回原始对象，而不是您刚刚创建的对象。

Note you can't chain this, .replaceWith() returns the original object, not the one you just created.

这篇关于jQuery fadeOut，replaceWith，animate几乎正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！