how to make a set of jquery effects run in sequence

Question

I have a set of jQuery effects that I would like to have run one after the other (currently they run simultaneously. Is there any way to fix this?

The code is as follows:

 <SCRIPT>
$(document).ready(function() {

    $(".right").click(function () {
         $(this).show("slide", { direction: "right" }, 1200);
    });

    // Trigger the handler once on document ready
    $(".right").click();

});
</SCRIPT>
<SCRIPT>
$(document).ready(function() {

    $("#left").click(function () {
         $(this).show("slide", { direction: "left" }, 1200);
    });

    // Trigger the handler once on document ready
    $("#left").click();

});
</SCRIPT>
<SCRIPT>
$(document).ready(function() {

    $("#up").click(function () {
         $(this).show("slide", { direction: "down" }, 1200);
    });

    // Trigger the handler once on document ready
    $("#up").click();

});
</SCRIPT>

@see http://stackoverflow.com/a/3314877/7613 specifically custom queue — Andrew, Feb 29 '12 at 22:08

Fresheyeball · Answer 1 · 2012-02-29T22:11:33.110

You need to use callbacks. Callbacks are functions that run when another function is complete, in this case your animation.

http://api.jquery.com/show/

Also you do not need so many declarations. Try is like this

<script>

    $(document).ready(function(){

           $('.right').show("slide", { direction: "right" }, 1200, function(){
                  //first callback
                  $('#left').show("slide", { direction: "left" }, 1200, function(){
                          //second callback
                          $('#up').show("slide", { direction: "down" }, 1200);
                  });
           });

    });

</script>

If you want animations to also trigger on click, you can do so by using the same .click statements you have now, just no need to //Trigger the handler on document ready

score 0 · Answer 2 · answered Feb 29 '12 at 22:08

Is this something you after!

$(document).ready(function() {

        $(".right").click(function () {
             $(this).show("slide", { direction: "right" }, 1200, function() {
                  $(".right").click();
             })
        });
    });

score 0 · Answer 3 · answered Feb 29 '12 at 22:11

It depends on how you going to sequence it.. Check below as an example and modified as you wanted it,

The final argument of the .show is a call back function which will be called after executing .show

<SCRIPT>
$(document).ready(function() {
    $(".right").click(function () {
         $(this).show("slide", { direction: "right" }, 1200, function () {
                // Trigger the handler once on document ready
                $("#left").click();
         });
    });

    $("#left").click(function () {
         $(this).show("slide", { direction: "left" }, 1200, function () {
              $("#up").click();
         });
    }); 

    $("#up").click(function () {
         $(this).show("slide", { direction: "down" }, 1200);
    });

    // Trigger the handler once on document ready
    $(".right").click();
});
</SCRIPT>

score 0 · Answer 4 · answered Feb 29 '12 at 22:13

You should call the next animation the first animations callback to animate them in sequence and the callback is the last argument of the show method.

Also instead of using multiple $(document).ready() you can club all together in just one.

$(document).ready(function() {
    $("#left").click(function () {
         $(this).show("slide", { direction: "left" }, 1200, function () {
              $("#up").click();//Trigger up click
         });
    }); 

    $("#up").click(function () {
         $(this).show("slide", { direction: "down" }, 1200);
    });

    $(".right").click(function () {
         $(this).show("slide", { direction: "right" }, 1200, function () {
              $("#left").click();//Trigger left click
         });
    }).click();//Trigger the right click
});

how to make a set of jquery effects run in sequence

4 Answers4