仍在尝试解决昨天的问题。
我试图通过动画它的“marginTop”属性来将元素一次向上滚动 50 像素。问题是,每次单击触发器时,元素都会“重置”并从 0 开始动画。任何人都可以向我解释这种令人困惑的行为吗?
在这里查看我的提醒
$(document).on("click",".scroll-control",function(e){
e.preventDefault();
var newMarginTop = parseInt($('.scroll-frame').css('marginTop'));
alert (newMarginTop); // returns 0
newMarginTop = newMarginTop - 50;
alert (newMarginTop); // returns -50
$('.scroll-frame').animate({"margin-top": newMarginTop},1000);
var newMarginTop = parseInt($('.scroll-frame').css('marginTop'));
alert (newMarginTop); // returns 0 <<< ??? Why not -50 ???
});
最佳答案
animate
方法是异步的。直到退出函数后,动画才会真正开始。 animate
调用之后的代码立即运行,而不是在动画完成后运行。
如果你想在动画结束后做一些事情,你需要使用回调:
$('.scroll-frame').animate({"margin-top": newMarginTop}, 1000, function(){
var newMarginTop = parseInt($('.scroll-frame').css('marginTop'));
alert (newMarginTop);
});
关于javascript - 为什么这个动画 marginTop 函数没有像我预期的那样工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9824345/