JQuery : problème simple avec animate()
Résolu
CrazyCow007
Messages postés
52
Date d'inscription
Statut
Membre
Dernière intervention
-
CrazyCow007 Messages postés 52 Date d'inscription Statut Membre Dernière intervention -
CrazyCow007 Messages postés 52 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je suis relativement débutant avec JQuery. Je souhaite mettre en place un système simple de notifications.
Voici le script actuel :
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 !
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 !
A voir également:
- JQuery : problème simple avec animate()
- Probleme de cohabitation de jquery - Forum Javascript
- Afficher et cacher en jquery ✓ - Forum Javascript
- La faille csrf en jquery ? - Forum Javascript
- Problème requête Ajax avec jquery ✓ - Forum Webmastering
- Probleme de scope en jQuery. je conprend pas, ✓ - Forum Javascript
2 réponses
J'ai eu un problème similaire, ceci avait résolu mon problème :
$("#message",this).stop(true,true);
$('#message').animate({
top: '14'
...
$("#message",this).stop(true,true);
$('#message').animate({
top: '14'
...
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()) :
NB : A quoi te sert le
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
thisdans
$("#message",this) ?
une erreur, de ma part le this. J'ai copié un de mes bouts de code, désolé.
C'est un 2 eme selector.
$(selector1, selector2, selector3)
une page intéressante, si tu veux aller plus loin dans les queues et les stop
https://css-tricks.com/examples/jQueryStop/
C'est un 2 eme selector.
$(selector1, selector2, selector3)
une page intéressante, si tu veux aller plus loin dans les queues et les stop
https://css-tricks.com/examples/jQueryStop/
