Question

我有3个li项目组合在一起，每个项目都有一个小延迟。如果单击下一个按钮，我希望不会发生，但3 lis已经是动画。

// when next is clicked
    $('.sh > .next').click(function() {

// slide in the individual lis
            $('div.active li').eq(0).animate({
                'left': 0,
                'right': 'auto'
            });
            $('div.active li').eq(1).delay(600).animate({
                'left': 100,
                'right': 'auto'
            });
            $('div.active li').eq(2).delay(1200).animate({
                'left': 200,
                'right': 'auto'
            });

});

Answer 1

如果动画正在进行，请添加一个设置为true的标志。

    var animating = false;
    var animationTime = 1800;  // Stores the duration of the animation

    $('.sh > .next').click(function() {
        if(!animating) {
            animating = true;
            $('div.active li').eq(0).animate({
                'left': 0,
                'right': 'auto'
            });
            $('div.active li').eq(1).delay(600).animate({
                'left': 100,
                'right': 'auto'
            });
            $('div.active li').eq(2).delay(1200).animate({
                'left': 200,
                'right': 'auto'
            });

            // Reset the flag, once the animation is complete.
            // This can also be done in a callback of the last animate().
            setTimeout(function() { 
                animating = false;
            }, animationTime);
       }
});

以下是一个例子：http://jsfiddle.net/FJd9Q/2/

在再次启用点击之前进行动画完成

1 个答案: