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);
});

Answer 2

也许考虑使用相对位置而不是负边距。使用负边距可能会出错，尤其是在较旧的浏览器中。

/* CSS */
.scroll-control{
position:relative;
}

然后使用：

/* Javascript */
$(".scroll-control").click(function(e){
    e.preventDefault();
    var newTop = $('.scroll-frame').css('top');
    newTop = newTop - 50;
    $('.scroll-frame').animate({"top": newTop},1000);  
});

为什么这个有效的marginTop函数不像我期望的那样工作？

2 个答案: