Comment faire pour démarrer/arrêter/redémarrer jQuery animation

J'ai 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 la fonction pour afficher un autre message, en pratique, il devrait se cacher, puis de le ré-apparaître avec le nouveau message pour un autre 5 secondes.

Ce qui se passe avec mon code ci-dessous, j'ai appeler la fonction pour afficher le message. Alors, disons que sur le 4e de la deuxième, j'appelle de nouveau pour afficher un autre message, le message est affiché pendant 1 seconde.

J'ai besoin de quelque sorte -reset - temps, mais ne peut pas comprendre comment. Essayé d'arrêter l'animation, de vérifier si l'élément est visible et le cacher si elle a été, et beaucoup d'autres choses. Je crois que la solution est simple chaînage de la question, mais ne peut pas obtenir de droit. De sorte que 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 d'avance...

OriginalL'auteur Kemal Emin | 2010-05-21

  1. 6

    En bref, vous ne pouvez pas utiliser .delay() pour ce que vous voulez. C'est juste un wrapper pour setTimeout() sur le prochain élément de file d'attente, vous pouvez voir la source ici, la partie importante:

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

    Donc, c'est juste du lancement d'un setTimeout() qui lorsqu'il est exécuté, retire l'élément suivant dans la file d'attente et l'exécute. Donc ce qui se passe est que vous avez ajouté un retard, et même avec .stop(true) ou .clearQueue(), lorsque vous la file d'attente de la .fadeOut() ensuite, vous êtes en train d'ajouter que le retour à la même fx file d'attente, de sorte que lorsque que setTimeout() termine dans les 5 secondes, c'est l'accaparement de la nouveau fondu vous en file d'attente et l'exécution.

    Vous aurez besoin de setTimout() et supprimer manuellement, puisque jQuery de base ne dispose pas de cette intégrés, 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));
}

    Vous pouvez voir un démo ici

    réponse parfaite! merci beaucoup!

    OriginalL'auteur Nick Craver

  2. 1

    Comme Nick 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) suffit d'utiliser .fadeTo(x,1).

    Fondamentalement, ce serait fade à une opacité totale, mais depuis la boîte de message est déjà à une opacité complète, cela ne fait rien, sauf à retarder les animations suivantes pour x millisecondes. Et l'avantage est que .fadeTo() peut être interrompue/abandonnée à l'aide de .stop(true).

    OriginalL'auteur Ignitor

  3. 0

    De l'essayer.

    elem.stop().show().delay(5000).fadeOut(1000);
    thıs ne fonctionne pas. essayé avant. le nouveau message est affiché, mais pour une période de ce que la gauche à partir de 5 secondes du premier message.

    OriginalL'auteur ground5hark

  4. 0

    J'ai été prise en CSS conflits parce que vous ne retirez jamais le msg classes avant d'en ajouter d'autres, j'ai donc effacé ceux avec 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'ai arrêter l'animation, de réinitialisation de l'opacité dans le cas où il a été dans le milieu de la décoloration et effacer la file d'attente avant d'ajouter le message et le redémarrage de la file d'attente. J'ai testé et cela devrait fonctionner pour vous.

    nope! cela ne semble pas fonctionner. le plus que j'aborde dans ce, de plus j'ai trouvé plus de gens à avoir des problèmes avec la fonction de temporisation. lire les commentaires ici, api.jquery.com/delay
    Ah, intéressant, j'ai testé uniquement certains cas, mais il ne fonctionne pas pour tous. Gardera violon.

    OriginalL'auteur mVChr

  5. 0

    Je redémarre animations de cette façon: (pas sûr si c'est tout à fait juste, tout de même)

    $(element).stop().clearQueue();

    $(element).delay(20).animate({ ... });

    OriginalL'auteur bdurao

  6. 0

    si vous utilisez jQuery, vient finir le courant de l'animation avant de redémarrer de nouveau:

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

    OriginalL'auteur user5353588