正在进行另一个动画时，jQuery进行动画处理 [英] Jquery animate when another animation is in progress

问题描述

我正在使用此处给出的简单缓动动画，使用

I'm using a simple easing animation given here using JQUERY EASING PLUGIN
i.e.easing a div from left:200 to left:0 and back.(last example on above page)

我在一个容器div中有多个div，而我想做的是按照以下方式为4 div设置动画:

I have multiple divs in a container div.and what i want to do is animate the 4 divs in following way :

1]假设我有两个div，div1和div2. 当div1是动画并且正在进行动画时，div2动画应该开始.例如:当div1从left = 200移到left = 0时，div2动画应该在div1在left =时开始100.

1] Suppose if i have two divs, div1 and div2. when div1 is animated,and the animation is in progress the div2 animation should start.eg: when div1 is moving from left=200 to left=0 , the div2 animation should start when div1 is at left = 100.

修改 (注意:div的数量是可变的)

Edit (Note:the number of divs are variable)

正在播放当前动画并达到下一个动画应开始的位置(动画效果在所有div中都是相同的).

When the current animation is in progress,and reaches a point the next animation should start (effect of animation is same of all divs).

2]在迭代div集合并设置动画效果时，将下一个动画延迟给定的时间间隔.

2] While iterating a div collection and animating, delay the next animation for a given interval of time.

有什么办法可以知道动画的开始吗?或动画正在进行中?

Is there any way to know start of animation? or animation is in progress?

谢谢

推荐答案

您可以使用':animated'伪选择器来确定元素当前是否在运动:

You can use the ':animated' pseudo-selector to find out if an element is currently in motion:

if ($('#div1').is(':animated')) {
    // do something
}

http://api.jquery.com/animated-selector/

您还可以尝试使用step选项来检查div2应该何时开始动画:

You can also try the step option to check when div2 should start animate:

$('#div1').animate({
    left:0
},{
    step: function() {
        // check distance and animate div2 when it reaches 100
    }
});

http://api.jquery.com/animate/

这篇关于正在进行另一个动画时，jQuery进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！