CODEWITHSUNDEEP
jqueryjquery-animate
ngplayground
ngplayground

Reputation: 21647

jQuery check Right position after animation ends

I have the following jQuery code

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

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

I'd like to check the position after the animation has ended but it returns -500px each time instead it should be giving me the value 0.

Upvotes: 0

Views: 114

Answers (3)

Rick Donohoe
Rick Donohoe

Reputation: 7281

In the case of it showing before the animation has finished you could add the code as a callback.

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

Upvotes: 0

Andrea Turri
Andrea Turri

Reputation: 6500

You have two possibilities. Create a setTimeout function for your console.log and variable or put it in the callback of the animation.

Example putting the code in the callback (best solution).

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

Example using setTimeout, just to test the result of your animation:

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

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

Upvotes: 0

j08691
j08691

Reputation: 207953

You need to check it after the animation is finished, so you need to put it in the animate's callback like:

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

jsFiddle example

Otherwise your code is running before the animation is finished.

Upvotes: 1

Related Questions