How can i get these to fire one after another?

Question

I've set this up all ready http://jsbin.com/ejese3/edit

I have these alert messages but at present if you click on another before the current alert is finished everything goes a bit mad. What I want to do is have them queue up to fire 1 after another instead of overlapping.

Suggestions?

Answer 1

I'm not sure I understand the question, but jQuery functions such as slideUp() can take a callback method that will be fired after the operation is completed.

You can use the callback to show the next alert.

http://api.jquery.com/slideDown/

For what it's worth, jQuery code (such as in your example) that looks like:

$('#messageDrop').addClass('visible').slideDown().delay('2000').slideUp().removeClass('visible')

...is hard to read and maintain (IMO). Adding callbacks or nested callbacks increases this complexity. Consider declaring a few local variables and working with those objects rather than chaining a bunch of statements together.

Also, the stop() method is your friend when dealing with (potentially conflicting) jQuery animations: http://api.jquery.com/stop/

Answer 2

$('#messageDrop').addClass('visible').slideDown( 2000, 
    function(){ $(this).slideUp(2000, 
        function(){ $(this).removeClass('visible');
        }); 
    });