Question

我有一系列图像来制作动画。这可以通过使用下面的编码来实现，但是我有一个常见的问题就是多次点击动画，因为它会启动一个新动画。

我需要能够在动画运行时禁用点击，或类似的效果。它可以禁用点击直到动画结束，或者重置动画以重新开始并清除当前正在运行的序列。

我目前有以下代码：

$(".startbutton").click( function() {
$(this).clearQueue( function() {

$(this).find("ul li:nth-child(1)").delay(124).animate({opacity: 0.0}, 0).delay(1860).animate({opacity: 1.0}, 0);
$(this).find("ul li:nth-child(2)").delay(124).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(3)").delay(248).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(4)").delay(372).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(5)").delay(496).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(6)").delay(620).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(7)").delay(744).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(8)").delay(868).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(9)").delay(992).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(10)").delay(1116).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(11)").delay(1240).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(12)").delay(1364).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(13)").delay(1488).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(14)").delay(1612).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(15)").delay(1736).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(16)").delay(1860).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0);
$(this).find("ul li:nth-child(17)").animate({opacity: 0.0}, 0).delay(1984).animate({opacity: 1.0}, 0);

 });
});

我插入的.clearQueue的作用是不再能够多次点击动画并搞砸了。但是，一旦动画序列完成，动画就不能再被点击，也不会再次运行。

我猜我需要'清除''clearQueue'或类似的东西。

如果有人有任何建议，将不胜感激。我尝试过使用人们在其他类似帖子中建议的'：animated'解决方案，这似乎是一个明智的解决方案，但到目前为止还没有解决问题。

Answer 1

好的，既然OP提供了示例代码，我会相应地重写这个答案。

以下是工作版本：

http://jsfiddle.net/qZGMW/

首先，根据我的原始建议使用该标志：

var started = false;
$(selector).click(function() {
    if (started) { return; }
    started = true;
    $(this).stop(); // Do not use clearQueue
    // Do animation normally
    $(lastOne).animate(param, param, function() { started = false; });
});

Answer 2

一般代码建议：对于同一表单的重复操作，有一个for loop。如下所示，它使代码更短，更清晰。关于您的主题，.clearQueue不会将回调函数作为参数。只需在开始制作动画之前调用它。 .stop也可能有用，你可以尝试效果并看看你喜欢什么。

$(".startbutton").click( function() {
    // $(this).clearQueue();  <- Correct usage, but unnecessary with .stop()
    $(this).stop(true, true);

    var $lis = $(this).find("ul li");
    $lis.stop(true, true);

    $lis.filter(":nth-child(1)")//.delay(124) <- Unnecessary delay here?
        .animate({opacity: 0.0}, 0).delay(1860).animate({opacity: 1.0}, 0);

    for ( var i=1; i< 16; i++ ) {
        $lis.filter(":nth-child(" + i+1 + ")")
            .delay( i * 124)
            .animate( {opacity: 1.0}, 0 )
            .delay( 125 )
            .animate({opacity: 0.0}, 0);
    }

    $lis.filter(":nth-child(17)")
        .animate({opacity: 0.0}, 0).delay(1984).animate({opacity: 1.0}, 0);
});

Answer 3

请查看this query API以防止发生默认操作。

请尝试下面的代码段。

$(".startbutton").click( function(e) {
   e.preventDefault();
   $(this).clearQueue( function() {
   your code continues...

禁用动画序列的点击功能

3 个答案: