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

如果它在动画完成之前显示，您可以添加代码作为回调。

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

Answer 3

你有两种可能。为您的 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.