How to order effects in jquery sequentially

Question

I have this snippet of code:

$("a#list-mode").click(function() {
  $("#list-fix-pos").removeClass('col-lg-3', 1250, "easeInOutQuart" );
  $(this).hide("fade", 1250, true);
  $("a#map-mode").show("fade", 1250, true);
});

How can I order the effects so that they take place sequentially? At the moment, all effects transition at once.

Thanks

there are different ways to order the effect of the animation you wanted to achieve, you can use setTimeout or $.delay() — blender_noob, Aug 01 '13 at 00:54
possible duplicate of [jQuery event order and waiting till animation complete](http://stackoverflow.com/questions/2407592/jquery-event-order-and-waiting-till-animation-complete) — Zach Saucier, Aug 01 '13 at 00:55

score 2 · Accepted Answer · answered Aug 01 '13 at 00:54

jQuery's .hide and .show functions allow you to specify a function to be performed upon completion. The syntax is

.hide( duration [, easing ] [, complete ] )

In your case, that'd be

$("a#list-mode").click(function() {
    $("#list-fix-pos").hide(1250, 'easeInOutQuart', function() {
        $(this).hide(1250, 'fade', function() {
            $("a#map-mode").show(1250, 'fade');
        });
    });
    $("#list-fix-pos").removeClass('col-lg-3');
});

vittore · Answer 2 · 2013-08-01T01:05:25.703

You have 3 options

use complete callbacks
use promises returned by element when they have animation going on
use .delay()

3rd case is simplest and keep code cleaner

$(...).animate(duration1,...)...
$(...).delay(duration1).animate(duration2,...)...

And just fyi with promises:

$(...).animate().promise().pipe(...)

or something like

$.when($(...).animate(...).promise())
 .then(function (){ return $(...).animate(...).promise() })
 .then(function (){ return $(...).animate(...).promise() })
 ...

which will look quite nice if you give functions names

function hideButton() { return $(...).animate().promise() }
function showMenu() { return $(...).animate().promise() }

$.when(hideButton).then(showMenu)

How to order effects in jquery sequentially

2 Answers2