Comment démarrer/arrêter/redémarrer l'animation jQuery

Question

je la fonction suivante que lorsque j'appelle affiche un message à l'utilisateur pour un certain laps de temps (5 secondes dans mon cas). Pendant cette "période" si j'appelle à nouveau la fonction pour afficher un autre message, pratiquement il devrait se cacher, puis réapparaître avec le nouveau message pendant 5 secondes supplémentaires.

Que se passe avec mon code ci-dessous, j'appelle la fonction pour afficher le message. Ensuite, disons à la 4ème seconde, je l'appelle à nouveau pour afficher un autre message, le nouveau message est affiché pendant 1 seconde.

je dois -Reset- en quelque sorte le temps mais ne peut pas comprendre comment. J'ai essayé d'arrêter l'animation, de vérifier si l'élément était visible et de le cacher s'il l'était, et bien d'autres choses. Je crois que la solution est un simple problème d'enchaînement, mais je ne peux pas le faire correctement. Donc toute aide serait appréciée!

function display_message(msgType, message) { 

    var elem = $('#ur_messagebox'); 

    switch (msgType) { 
     case 'confirm': 
      elem.addClass('msg_confirm'); 
      break; 

     case 'error': 
      elem.addClass('msg_error'); 
      break; 
    } 

    elem.html(message); 
    elem.show().delay(5000).fadeOut(1000); 
} 

merci à l'avance ...

Answer 1

En bref, vous ne pouvez pas utiliser .delay() pour ce que vous voulez. Il est juste un wrapper pour setTimeout() sur l'élément suivant de la file d'attente, you can see the source here, la partie importante:

return this.queue(type, function() { 
     var elem = this; 
     setTimeout(function() { 
      jQuery.dequeue(elem, type); 
     }, time); 
    }); 

C'est donc faire la queue juste un setTimeout() qui, lorsqu'il est exécuté, dequeues l'élément suivant dans la file d'attente et l'exécute. Alors qu'est-ce qui se passe est que vous avez ajouté un retard, et même avec .stop(true) ou .clearQueue(), quand on fait la queue le .fadeOut() après vous ajoutez que revenir à la mêmefx file d'attente, de sorte que lorsque setTimeout() termine en 5 secondes, il est saisissant le nouveau vous avez mis en file d'attente et l'exécuter.

Vous aurez besoin de setTimout() et le supprimer manuellement, car noyau jQuery ne possède pas cette intégré, quelque chose comme ceci:

function display_message(msgType, message) { 
    var mb = $('#ur_messagebox') 
      .addClass(msgType === 'confirm' ? 'msg_confirm' : 'msg_error') 
      .html(message) 
      .stop(true, true).fadeIn(); 
    if(mb.data('delay')) clearTimeout(mb.data('delay')); 
    mb.data('delay', setTimeout(function() { mb.fadeOut(1000); }, 5000)); 
} 

You can see a working demo here

Answer 2

essayer.

elem.stop().show().delay(5000).fadeOut(1000); 

Answer 3

Je recevais des conflits CSS parce que vous ne supprimez les classes msg avant d'ajouter l'autre, donc je franchis ceux qui elem.removeClass('msg_confirm msg_error'); en plus de corriger le problème:

function display_message(msgType, message) { 

    var elem = $('#ur_messagebox'); 
    elem.removeClass('msg_confirm msg_error'); 

    switch (msgType) { 
     case 'confirm': 
      elem.addClass('msg_confirm'); 
      break; 

     case 'error': 
      elem.addClass('msg_error'); 
      break; 
    } 

    elem.stop().css({opacity:1}).clearQueue(); 
    elem.html(message); 
    elem.show().delay(5000).fadeOut(1000); 
} 

Donc, avec elem.stop().css({opacity:1}).clearQueue(); j'arrête la animation, réinitialiser l'opacité au cas où il était en train de disparaître et effacer la file d'attente avant d'ajouter le message et de redémarrer la file d'attente. J'ai testé cela et cela devrait fonctionner pour vous.

Answer 4

je redémarre animations ainsi: (. ne sais pas si elle est tout à fait raison, cependant)

$ (élément) .stop() clearQueue();

$ (élément) .delay (20) .animate ({...});

Answer 5

Comme Nick a souligné:

En bref, vous ne pouvez pas utiliser .delay() pour ce que vous voulez.

Mais il existe une solution simple: au lieu d'utiliser .delay(x) il suffit d'utiliser .fadeTo(x,1). Fondamentalement, cela passerait à une opacité totale, mais comme la boîte de message est déjà en pleine opacité, cela ne fait rien sauf retarder les animations suivantes pour x millisecondes. Et l'avantage est que .fadeTo() peut être arrêté/abandonné en utilisant .stop(true).

Answer 6

si vous utilisez jQuery, terminer simplement l'animation en cours avant de le redémarrer à nouveau:

tooltip.finish();// set a defined start for animation 
tooltip.show(); 
tooltip.delay(4000).fadeOut(1500);