简体   繁体   English

jQuery计算动画后div的位置

[英]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. 嘿,我有一个通过jQuery动画移动的div,我正在尝试计算该div的位置。 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. 除了在动画完成之前计算出var galleryItemLeft之外,实际上就在那里。 http://www.ehbeat.com/test/ 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>

.animate() allows you to have a callback function once the animation is complete. .animate()允许您在动画完成后使用回调函数。

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: 要查找div的位置,只需执行以下操作:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM