HELP - Trying to return the left css value after using 'animate' function
I want to return the value of the left css property of a particular <div> after I have moved it using the animate function in jquery. I have it return correctly on second pass but it wont see the new left property value even though I am requesting the value after the animate function has completed? Any thoughts on what I am doing wrong?
$(document).ready(function() {
var ThumbNailPosition
function returnThumbPosition() {
ThumbNailPosition = $('.showcase-thumbs li').css('left');
}
function displayValues() {
returnThumbPosition()
$('.showcase p').append('left' + ThumbNailPosition);
}
$('.btn-left-arrow').click(function(){
$('.showcase-thumbs li').stop(true,true);
ThumbNailPosition = $('.showcase-thumbs li').css('left');
if (ThumbNailPosition == "-972px") {
$('.btn-left-arrow').css('cursor','default');
$('.btn-left-arrow').css('backgroundPosition','0 -100px')
} else {
$('.showcase-thumbs li').animate({ left: '-=162px' }, { duration:200, queue:false});
$('.btn-right-arrow').css('backgroundPosition','0 0');
$('.btn-right-arrow').css('cursor','pointer');
}
//returnThumbPosition();
//displayValues();
});
$('.btn-right-arrow').click(function(){
$('.showcase-thumbs li').stop(true,true);
ThumbNailPosition = $('.showcase-thumbs li').css('left');
if(ThumbNailPosition == "0px") {
$('.btn-right-arrow').css('backgroundPosition','0 -100px')
$('.btn-right-arrow').css('cursor','default');
} else {
$('.btn-right-arrow').css('cursor','pointer');
$('.btn-left-arrow').css('backgroundPosition','0 0')
$('.showcase-thumbs li').animate({ left: '+=162px' }, { duration:200, queue:false});
}
//returnThumbPosition();
//displayValues();
});
});