javascript - 在开始另一个之前完成动画

Question

问题:每当我点击得更快或更慢时，我需要在下一个开始之前完成最后一个 .click() 调用。如果您更快地单击按钮，在给定的示例中，您可以看到它留下不透明度为 0 的分区。

我想要达到的目标是堆叠到 3-4。我尝试了一些队列代码示例，无法使其工作。

$("#addNew").click(function(){
    var _this = $("#scrollable");
    //Switch classes
    _this.find("div.first").switchClass("first","second",500);
    _this.find("div.second").switchClass("second","third",500);
    _this.find("div.third").switchClass("third","fourth",500);
    _this.find("div.fourth").switchClass("fourth","fifth",500);
    // Insert first/new line
    $("<div class='first'>Hello!</div>").css("opacity","0").hide().prependTo(_this).slideDown(function(){$(this).stop().animate({opacity:1},300)})
    $("div.fifth").fadeOut().remove();
});

这里是例子:http://jsfiddle.net/gtFyP/5/

Answer 1

使用设置间隔

您可以将以下标记解决方案与 setInterval 结合使用，从而能够处理动画期间发生的点击。

更新了您的 JS Fiddle again with this alternate solution .

$(function() {
    var clicking = false;
    var clickCache = 0;

    window.setInterval(function(){
        if (!clicking && clickCache) {
            processClick();
            clickCache--;
        }
    }, 100);

    var processClick = function() {
         var _this = $("#scrollable");

        //Switch classes
        _this.find("div.first").switchClass("first", "second", 500);
        _this.find("div.second").switchClass("second", "third", 500);
        _this.find("div.third").switchClass("third", "fourth", 500);
        _this.find("div.fourth").switchClass("fourth", "fifth", 500);


        clicking = true;
        // Insert first/new line
        $("<div class='first'>Hello!</div>").css("opacity", "0").hide().prependTo(_this).slideDown(function() {
            $(this).stop().animate({
                opacity: 1
            }, 300, function(){
                clicking = false;
            });
        });
        $("div.fifth").fadeOut().remove();
    };

    $("#addNew").click(function() {
        clickCache++;
    });
});

使用标志

您可以使用一个标志 - 只有在它为 false 时才启动动画。当您开始动画时，将其设置为 true，当动画完成时，将其设置回 false。

我已经 modified your JS Fiddle .