Mensajes de cola jQuery

Question

Tengo una función corta que debería mostrar mensajes en un sitio web.

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

Y hay otra función que oculta los mensajes.

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

El problema es que si llamo a esta función más de una vez, intenta mostrar todos los mensajes al mismo tiempo y todo se interrumpe. Quiero llamar a la función dos veces y luego debería poner en cola las animaciones y mostrar un mensaje tras otro. La función se debe llamar más de una vez al mismo tiempo, pero se muestra una tras otra. El siguiente mensaje debe mostrarse cuando el primer fuego se esconde.

¿Cómo podría resolver el problema? ¡Estaría bien!

Answer 1

Aquí hay un mini complemento personalizado que he usado en el pasado que encadena un montón de animaciones una tras otra.

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

Puede llamarlo así ( Aquí hay un ejemplo de esto en uso ):

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

La función que pasa a chain pasa otra función a la que debe llamar cuando está inactivo con un ciclo. En el ejemplo anterior, simplemente pasamos la función nextChain como devolución de llamada a slideToggle .

Answer 2

Su función showhint podría comenzar simplemente ocultando la notificación y cuando se complete, la devolución de llamada será lo que es la función showhint existente, que cambiaría el texto y lo mostraría. El código no debería ser difícil dado lo que ya has hecho.

Answer 3

¿no puedes usar un complemento de notificación? aquí hay dos ( uno , dos ) que son bastante elegantes.