[Résolu] Stoper une animation en jquery

Bonjour,

Je suis sur un problème tout bête dans lequel je bloque.

J'ai réalisé une suite de li dont j'ai attaché l'évènement live. Je voudrais que l'animation s'arrête si on clique sur une autre li. Et bah là je bloque Je me doute que c'est avec .queue() mais je trouve pas...

Voici le code :

$('.clickListe').live('click',
	function(){

		idDuClick = $(this).attr("id");
	
		if(idDuClick +'IMG' != $('#imageMenu').find('img').attr('id')){
			
			ajaxImg(idDuClick); //ici j'enleve l'image précédente et je met la nouvelle
			
		}
	}
);

Et pour plus de clarté, j'ai le site (il faut donc cliquer sur la liste verticale un peu partout pour voir le problème) :
Le site test

Merci de votre aide les alsanautes !

Bonjour,

Si tu sais lire l'anglais, il y a cet excellent article qui t'expliquera comment stopper une animation:

http://www.elijahmanor.com/2012/02/find-jquery-bug-4-animations-gone-wild.html

Sinon, tu sais que .live() est déprécié depuis jQuery 1.7 et qu'il devrait être remplacé par :

$(document).on('click', '.clickListe', function () {
    // notre code
});

Mais évidemment, dans ton cas le mieux serait de ne pas déléguer tes éléments au document, mais sur un élément plus rapproché de tes <li>, comme <ul> par exemple.

Si tu veux en savoir plus sur le sujet, il y a cet article plutôt clair venant du même auteur:
http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html

Bonjour,

Alors pour la dépréciation de live, j'ai vu ça lors de mes recherches (et je trouvais pas de bon articles !) et du coup j'ai actualisé malheureusement je n'arrive à le faire marcher qu'avec $(document) . J'ai pourtant essayé ul ou meme la div qui contient les li mais ça ne marche pas.... Si quelqu'un voit pourquoi je suis preneur !


Alors pour stop(), j'avais regardé les fonctions de jquery et j'ai même pas regardé la plus évidente !
Du coup je l'ai fais mais ça ne marche pas vraiment ! Ma fonction que je stop est une fonction ajax, ce qui fait que le stop peut arreter l'image a n'importe quel moment du coupe je me retrouve avec une demie image ou alors la div n'a pas été 'toggle' !!
Je cherche mais je ne trouve pas là !


Merci de ton aide en tout les cas !!
Modifié par Mrezechiel (10 Mar 2012 - 16:09)

Bon finalement j'ai trouvé une solution pour la fonction stop !

J'ai mis un delay a chaque click de sorte que finalement seul le dernier click (sur 800ms) sera pris en compte

Par contre pour la fonction on je n'ai pas trouvé plus proche que 'document' !

Bonjour,

Pour .on(), ceci devrait marcher:

$('#box-menu').on('click', 'a', function () {

    // notre code

});

Cependant, note que tu n'as pas de .clickList dans ton élément, c'est peut-être de là que viens ton problème ? À la place, il suffit de cibler tous les liens contenu dans #box-menu (les liens car sinon ton code sera inaccessible aux gens navigants au clavier).

idDuClick = $(this).parent('li').attr("id");

Mais à ce niveau, autant mettre le id directement sur tes balises <a>

Sinon, je ne suis pas convaincu de ton utilisation de delay.

As-tu essayé avec la queue à false ?

$().animate( properties, {queue: false});

Modifié par Vaxilart (10 Mar 2012 - 19:20)

Bonjour,

D'abord merci de tes réponses !

Bon du coup j'ai essayé le .on() mais ça ne marche pas et je comprends pas

Enfin pour la queue en false je suis avec la fonction slidetoggle et elle n'a pas cette fonctionnalité du coup j'ai pas réussi !
Modifié par Mrezechiel (11 Mar 2012 - 16:32)

Pour .on(), tu es bien sur la dernière version de jQuery ? (1.7.1)

Bonsoir,


Oui c'est bien celle là !

Bonjour tout le monde !

bon finalement j'ai trouvé la solution.

En mettant stop(true, true), c'est correct mais avant j'avais slideDown et slideUp dans la fonction ajax or du coup l'asynchrone posait problème. J'ai donc mis slideUp avant l'ajax et slideDown aprés avec chacun la fonction stop et ça marche parfaitement.

Merci à vaxilart

p.s par contre pour live je vois pas Oo