Messaggi della coda jQuery

Question

Ho una breve funzione che dovrebbe mostrare i messaggi su un sito web.

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

E c'è un'altra funzione che nasconde i messaggi.

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

Il problema è che se chiamo questa funzione più di una volta prova a mostrare tutti i messaggi contemporaneamente e tutto si interrompe. Voglio chiamare la funzione due volte e quindi dovrebbe mettere in coda le animazioni e mostrare un messaggio dopo l'altro. La funzione dovrebbe essere chiamata più di una volta contemporaneamente ma mostrata una dopo l'altra. Il prossimo messaggio dovrebbe essere mostrato quando si nasconde i primi.

Come posso risolvere il problema? Sarebbe bello!

Answer 1

Ecco un mini plug-in personalizzato che ho usato in passato che concatena una serie di animazioni una dopo l'altra.

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

Potresti chiamarlo così ( Ecco un esempio in uso ):

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

La funzione che passi a chain passa un'altra funzione che devi chiamare quando sei inattivo con un ciclo. Nell'esempio sopra, passiamo semplicemente la funzione nextChain come callback a slideToggle .

Answer 2

La tua funzione showhint potrebbe iniziare semplicemente nascondendo la notifica e quando è completa la richiamata sarebbe quella che è la funzione showhint esistente, che cambierebbe il testo e lo mostrerebbe. Il codice non dovrebbe essere difficile dato quello che hai già fatto.

Answer 3

non puoi semplicemente usare un plugin di notifica? eccone due ( one , due ) che sono piuttosto eleganti.