问题描述
我正在尝试完成以下操作:
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几乎正常工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!