Messaggi della coda jQuery
-
06-07-2019 - |
Domanda
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!
Soluzione
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
.
Altri suggerimenti
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.