Сообщения очереди jQuery

Question

У меня есть короткая функция, которая должна показывать сообщения на веб-сайте.

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

И есть еще одна функция, которая скрывает сообщения.

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

Проблема в том, что если я вызываю эту функцию более одного раза, она пытается показать все сообщения одновременно, и все ломается. Я хочу вызвать функцию дважды, а затем она должна поставить анимацию в очередь и показывать одно сообщение за другим. Функция должна вызываться более одного раза одновременно, но показываться один за другим. Следующее сообщение должно быть показано, когда ели прячутся.

Как я мог решить проблему? Было бы хорошо!

Answer 1

Вот небольшой пользовательский плагин, который я использовал в прошлом, который связывает кучу анимаций одну за другой.

// 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();
};

Вы можете назвать это так ( Вот пример использования ):

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

Функция, которую вы передаете chain, передает другую функцию, которую вы должны вызывать, когда у вас заканчивается один цикл. В приведенном выше примере мы просто передаем функцию nextChain в качестве обратного вызова для slideToggle.

Answer 2

Вы не можете просто использовать плагин для уведомлений? Вот два ( один , два ), которые довольно элегантны.

Answer 3

Ваша функция showhint может просто начаться с сокрытия уведомления, и когда это будет завершено, обратный вызов будет тем, что есть существующая функция showhint, которая изменит текст и покажет его. Код не должен быть сложным, учитывая то, что вы уже сделали.