Jquery calculate position of div after animation
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 = $(".Galle开发者_高级运维ryItem").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>
.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');
精彩评论