javascript - 为什么这个动画 marginTop 函数没有像我预期的那样工作？

Question

仍在尝试解决昨天的问题。

我试图通过动画它的“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 ???    
});

Answer 1

animate 方法是异步的。直到退出函数后，动画才会真正开始。 animate 调用之后的代码立即运行，而不是在动画完成后运行。

如果你想在动画结束后做一些事情，你需要使用回调:

$('.scroll-frame').animate({"margin-top": newMarginTop}, 1000, function(){
  var newMarginTop = parseInt($('.scroll-frame').css('marginTop'));
  alert (newMarginTop);
});