JQuery : problème simple avec animate() Résolu/Fermé

Question

Bonjour,

Je suis relativement débutant avec JQuery. Je souhaite mettre en place un système simple de notifications.

Voici le script actuel :
function msg(txt) {
    if(txt) {
        $("#message").html(txt);

        $('#message').animate({
            top: '14'
        }, 1000, "easeOutBounce", function() {
            // Animation complete
            setTimeout(
                function() {
                    $('#message').animate({
                        top: '-66'
                    }, 1000 )}, 1500);
        });
    }
}

Explications : un message s'affiche en haut au centre de l'écran avec un effet de rebondissement. Après 1,5s ce message disparaît.

Mon problème est que ça devient un peu buggé lorsque je fais appel une seconde fois à cette fonction avant que le message précédent ait disparu.

Je pense que le meilleur moyen serait d'annuler l'effet de disparition lorsqu'un nouveau message est affiché de relancer le Timeout pour 1,5s, mais je ne sais pas bien comment le réaliser. J'ai vu la fonction clearQueue() mais je n'ai pas bien compris si ça pourrait répondre à ma problématique.

Je vous remercie par avance pour vos conseils !

-nOg- · Answer

J'ai eu un problème similaire, ceci avait résolu mon problème :

$("#message",this).stop(true,true);

$('#message').animate({
            top: '14'
...

CrazyCow007 · Answer

Oui ça permet effectivement de régler le problème. J'ai aussi opté pour cette solution.   

Mais ce n'est pas exactement la solution idéale où la bulle resterait en place, le texte change et le délai avant disparition est repoussé à nouveau à 1,5 seconde.   

Je poste le code définitif que j'utilise actuellement (qui utilise cette fonction stop()) :  

function msg(txt) {   
    if(txt) {   
        $('#message').stop(true, true).css({top: -66}).html(txt).   
            animate({top: 14}, 800, 'easeOutBounce').delay(1500).   
            animate({top: -66}, 1000);   
    }   
}   


NB : A quoi te sert le this dans $("#message",this) ?

JQuery : problème simple avec animate()

2 réponses

Discussions similaires