本文介绍了jQuery fadeOut,replaceWith,animate几乎正常工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试完成以下操作:
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" fadeout2. 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!

推荐答案

在你的情况下没有回调,它的动画签名与动画不同。

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几乎正常工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-28 04:48
查看更多