Question

Hey i have a div moving via a jquery animation and i am trying to calculate that divs position. The position is calculated on click but then the position before the animation is calculated and not after the animation.

Sooo basically how would i go about having the animation happen and then have the position calculated and make the appropriate buttons hidden?

Here is a example of what i have thus far. It is practically there except for the var galleryItemLeft being calculated before the animation completes. http://www.ehbeat.com/test/

<script type="text/javascript">
$(document).ready(function(){

//Check width of Gallery div
var galleryWidth = $("#Gallery").innerWidth();

//Check width of GalleryItem
var galleryItemWidth = $(".GalleryItem").innerWidth();

    $('.MoveRight').hide();

    $(".MoveRight").click(function(){
  $(".GalleryItem").animate({"left": "+=100px"}, "slow");
  $(".GalleryItem2").animate({"left": "+=140px"}, "slow");
});

$(".MoveLeft").click(function(){
  $(".GalleryItem").animate({"left": "-=100px"}, "slow");
  $(".GalleryItem2").animate({"left": "-=140px"}, "slow");
});

$(".Controls").live("click", function() {
    position = $(".GalleryItem").position();
    galleryItemLeft = position.left;

    if(galleryItemLeft >= "0") { 
        $('.MoveRight').hide();}
    else{
        $('.MoveRight').show();
    }

    if(galleryItemLeft <= galleryWidth - galleryItemWidth) {
        $('.MoveLeft').hide();}
        else{
        $('.MoveLeft').show();
    }
});

});
</script>

Answer 1

.animate() allows you to have a callback function once the animation is complete.

eg.

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete. do stuff here
  });
});

to find the position of a div, just do:

var leftPos = $('#mydiv').css('left');