1

我有一系列图像来创建动画。这可以通过使用下面的编码来工作，但是我遇到了一个常见的问题，即多次点击会在动画开始一个新动画时弄乱动画。

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

我目前有以下代码：

$(".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' 解决方案，这似乎是一个明智的解决方案，但到目前为止还没有解决问题。

4

3 回答 3

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; });
});
于 2013-01-02T00:29:05.463 回答
1

一般代码建议：相同形式的重复动作有一个for循环。正如您在下面看到的，它使代码更短、更清晰。关于您的主题，.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);
});​
于 2013-01-02T01:04:30.660 回答
0

查看此查询 API以防止发生默认操作。

只需尝试下面的代码片段..

$(".startbutton").click( function(e) {
   e.preventDefault();
   $(this).clearQueue( function() {
   your code continues...
于 2013-01-02T00:34:18.800 回答