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

您可以将以下标记解决方案与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++;
    });
});

使用标志

你可以使用一个标志 - 只有当它是假的时才开始动画。当您开始制作动画时，将其设置为true，当动画完成后，将其设置为false。

我modified your JS Fiddle。

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

1 个答案:

使用setInterval

使用标志