mensagens de fila jQuery

Question

Eu tenho uma pequena função que deve mostrar mensagens em um site.

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

E há uma outra função que oculta as mensagens.

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

O problema é que se eu chamar essa função mais de uma vezes ele tenta mostrar todas as mensagens no mesmo tempo e quebra tudo. Quero chamar a função duas vezes e, em seguida, ele deve fila as animações e mostrar uma mensagem após o outro. A função deve ser chamado mais de uma vezes, ao mesmo tempo, mas mostrou um após o outro. A próxima mensagem deve ser exibida quando as peles abetos.

Como eu poderia resolver o problema? Seria bom!

Answer 1

Aqui está um mini plug-in personalizado que eu usei no passado que as cadeias de um monte de animações, um após outro.

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

Você pode chamá-lo assim ( Aqui está um exemplo de que em uso ):

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

A função que você passar para chain passa outra função que você deve ligar quando você está para baixo com um ciclo. No exemplo acima, nós apenas passar a função nextChain como o retorno de chamada para o slideToggle.

Answer 2

A sua função showHint poderia simplesmente começar por esconder a notificação e quando isso estiver concluído o retorno seria o que é a função showHint existente, que iria mudar o texto e mostrá-lo. Código não deve ser administrado difícil que você já fez.

Answer 3

você não pode apenas usar um plugin de notificação? aqui estão dois ( um , dois ) que são muito vistosas.