Jquery effects wait for previous to finish before running

Question

I want three events to run after another so 1st line finishes then second line starts after that 3rd line start...so next element(effect) should wait until previous effect is finished?

Thanks

ORIGINAL CODE:

$('.login_menu_arrow.top').click(function(event)
{
    $("#login_menu").slideUp();
    $('.login_menu_arrow.top').hide();
    $('.login_menu_arrow.bottom').show();
    event.stopPropagation();
});

My test which won't work:

Source: A way to chain a sequence of events in JQuery?

1:

$('.login_menu_arrow.top').click(function(event)
{
    $("#login_menu").slideUp(function() {
        $('.login_menu_arrow.top').hide(function() {
            $('.login_menu_arrow.bottom').show();
        });
    });
});

Source: How do you get JQuery to wait until an effect is finished?

2:

$('.login_menu_arrow.top').click(function(event)
{
    $(this).queue(function() {
        $("#login_menu").slideUp();
        $(this).dequeue();
    }).queue(function() {
        $('.login_menu_arrow.top').hide();
        $(this).dequeue();
    }).queue(function() {
        $('.login_menu_arrow.bottom').show();
        $(this).dequeue();
    });
});

score 4 · Accepted Answer · answered Dec 12 '13 at 10:12

You were close with #1, but hide isn't an animation effect unless you call it with a duration, so you don't use a callback with it:

$('.login_menu_arrow.top').click(function(event)
{
    $("#login_menu").slideUp(function() {
        $('.login_menu_arrow.top').hide();
        $('.login_menu_arrow.bottom').show();
    });
});

Note that this works because you're animating a single element (#login_menu). If you were animating multiple elements, you'd get multiple calls to the callback (one call per element as it completed). If you were animating multiple elements and wanted a single callback when they were all done, you'd use promise after starting the animation, as shown in this example. But you don't need to do that since you're animating a single element.

Thank you. I'll look into `.promise()` as well. – BentCoder Dec 12 '13 at 10:26 — BentCoder, Dec 12 '13 at 10:26

score 3 · Answer 2 · answered Dec 12 '13 at 10:14

Set duration to hide() method to animate it:

$('.login_menu_arrow.top').click(function(event)
{
    $("#login_menu").slideUp(function() {
        $('.login_menu_arrow.top').hide(400,function() {
            $('.login_menu_arrow.bottom').show();
        });
    });
});

Or you could use fadeOut() method.

Jquery effects wait for previous to finish before running

2 Answers2