jQuery queue messages

Question

Hello,

I've got a short function that should show messages on a website.

function showHint() { 
    $('#notify').html('message text').show('slide', {direction: 'right'}, 500);
}

And there is another function that hides the messages.

function hideHint() { 
    $('#notify').hide('slide', {direction: 'right'}, 500);
}

The Problem is that if I call this function more than one times it tries to show all messages at the same time and everything breaks. I want to call the function twice and then it should queue the animations and show one message after another. The function should be called more than one times at the same time but shown one after another. The next message should be shown when the firs hides.

How could I solve the Problem? Would be nice!

Answer 1

Here's a mini custom plugin that I've used in the past that chains a bunch of animations one after another.

// Good for serializing animations
$.fn.chain = function(fn) {
  var elements = this;
  var i = 0;
  function nextAction() {
    if (elements.eq(i)) fn.apply(elements.eq(i), [nextAction]);
    i++;
  }
  nextAction();
};

You might call it like so (Here's an example of it in use):

$(document).ready(function() {
  $('li').chain(function(nextChain) { this.slideToggle("fast", nextChain); });
});

The function you pass to chain passes another function that you must call when you're down with one cycle. In the example above, we just pass the nextChain function as the callback to the slideToggle.

Answer 2

Your showhint function could just start by hiding the notification and when that is complete the callback would be what is the existing showhint function, that would change the text and show it. Code shouldn't be difficult given what you've already done.

Answer 3

can you not just use a notification plugin? here are two (one, two) that are pretty spiffy.