jquery - jQueryチェックアニメーション終了後の正しい位置

Question

私は次のjQueryコードを持っています

$('.sidebar-address').animate({
    'right' : "+=500px"
});

var sideBarPos = $('.sidebar-address').css('right');
console.log(sideBarPos);

アニメーションが終了した後に位置を確認したいのですが、毎回-500pxが返され、代わりに値0が返されます。

Answer 1

アニメーションの終了後にチェックする必要があるため、次のようにアニメーションのコールバックに配置する必要があります。

$('.sidebar-address').animate({
    'right' : "+=500px"
},function(){
    var sideBarPos = $(this).css('right');
    console.log(sideBarPos);
});

jsFiddleの例

それ以外の場合は、アニメーションが終了する前にコードが実行されます。

Answer 2

2つの可能性があります。console.logと変数のsetTimeout関数を作成するか、アニメーションのコールバックに配置します。

コードをコールバックに入れる例（最良の解決策）。

$('.sidebar-address').animate({
    'right' : "+=500px"
},function(){
    var sideBarPos = $('.sidebar-address').css('right');
    console.log(sideBarPos);
});

アニメーションの結果をテストするためだけに、setTimeoutを使用した例：

$('.sidebar-address').animate({
    'right' : "+=500px"
});

setTimeout(function() {
    var sideBarPos = $('.sidebar-address').css('right');
    console.log(sideBarPos);
}, 1000); // if animation is 900, put 1000.

Answer 3

アニメーションが終了する前に表示される場合は、コードをコールバックとして追加できます。

$('.sidebar-address').animate({
    'right' : "+=500px"
}, ANIMATION-TIME, function() {
    console.log($(this).css('right'));
);