なぜ私はこのanimate 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

はたぶん代わりに負のマージンの相対位置を使用して考えます。負のマージンを使用すると、特に旧式のブラウザでは間違ってしまう可能性があります。

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

は、次に使用します。これは、http://jsfiddle.net/7zYBR/4/作業取り組んでいる

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

Answer 2

animateメソッドは非同期です。アニメーションは、関数を終了するまで実際には開始されません。 animateコール直後のコードは、アニメーションが完了した後ではなく直ちに実行されます。

アニメーションの後に何かをしたい場合は、コールバックを使用する必要があります。

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