为什么这个动画marginTop函数不能像我期望的那样工作？

仍然试图从昨天看出这一点。为什么这个动画marginTop函数不能像我期望的那样工作？

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

来源

2012-03-22 K.K. Smith

这是工作http://jsfiddle.net/7zYBR/4/，工作。 – 2012-03-22 14:52:10

尝试http://jsfiddle.net/7zYBR/9/，它的工作。 – 2012-03-22 15:06:04

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

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

来源

2012-03-22 14:46:23

谢谢！这工作。（尽管我正在使用Safari 5） – 2012-03-22 15:11:49

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

如果你想在动画后做什么，你需要使用一个回调：

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

来源

2012-03-22 14:42:36 Guffa

好吧..多数民众赞成在知道，但我的动画后的警报只是为了排除故障。事实是，每次运行该函数时，元素都会从marginTop 0到-50进行动画处理。即使有你的信息，我第二次运行函数时，我应该得到-50当我检查marginTop，它应该从-50到-100的动画，是正确的？但是，每次运行该函数时，即使在运行动画之后，我的第一个警报都会返回0。想法？ – 2012-03-22 14:51:05

为什么这个动画marginTop函数不能像我期望的那样工作？

回答

相关问题