Question

Problem: Whenever I click faster or slower I need last .click() call to finish before the next one starts. If you click the button faster , in the given example, you can see it’s leaving divisions with 0 opacity.

What I want to achieve is stacking up till 3-4. I tried some queue code examples, couldn’t make it work.

$("#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();
});

Here is example: http://jsfiddle.net/gtFyP/5/

Answer 1

Use setInterval

You could combine the below flag solution with setInterval, and thus be able to process clicks occurring during an animation.

Updated your 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++;
    });
});

Use a Flag

You could use a flag – only start an animation if it’s false. When you start animating, set it to true, when the animation is done, set it back to false.

I’ve modified your JS Fiddle.