Insérer des étapes dans une fonction ?

Version imprimable

Bonjour à tous,

Voici mon souci avec jQuery.
J'ai un menu qui au clic de chaque item doit fermer une DIV et en ouvrir une autre (en animation fluide).
Ensuite, la page doit scroller vers une ancre contenue dans cette DIV qui vient de s'ouvrir.

Le problème est que tout se déroule en même temps. Du coup, lorsque la page se dirige vers l'ancre, cette dernière n'est pas encore correctement positionnée. Je n'arrive donc pas au bon endroit.

La seule solution que j'ai trouvée est de passer mes animations sur un délai de 0 seconde (ce qui n'est pas vraiment le truc le plus logique à envisager pour une animation…).

En résumé, en partant de la version simplifiée de ma fonction (déclenchée au clic) mentionnée ci-dessous, comment dois-je faire pour que les événements se déroulent les uns à la suite des autres et non "tous en même temps" ?

Merci à vous !
Code:

1 2 3 4 5 6 function shortcutsZZZ () { $('.boxBody div').stop().slideUp(0,'linear'); $('.boxBody div:eq(' + $('.tabMenu > li#menu01').index('.tabMenu > li') + ')').stop().slideDown(0,'linear'); $('html,body').animate({scrollTop: $("#page").offset().top}, 2000); };

25/07/2013, 20h15
Darkaurora

je n'ai jamais eu à mettre en oeuvre ce genre de système cependant je te conseillerais de faire une recherche sur les callbacks et surtout sur le système de queue Jquery.

Si ma mémoire est bonne il existe des méthodes pour attendre la fin d'une exécution avant de déclencher le reste du code.

sinon tu peux toujours te débrouiller avec certaines fonctions d'effets jquery qui utilise nativement les notions de queue et de callback

Code:

1
2
3
4
5
6
7
$( ".boxBody div" ).stop().slideUp( 1000, "linear", function(){
	$( ".boxBody div:eq(" + $( ".tabMenu > li#menu01" ).index( ".tabMenu > li" ) + ")" )
		.stop()
		.slideDown( 1000, "linear", function(){
			$( "html,body" ).animate({ "scrollTop" : $( "#page" ).offset().top }, 2000 );
		});
});

Merci beaucoup Daniel !
Les réponses concrètes se font rares ;)

Depuis hier, je suis parvenu à obtenir "plus ou moins" ce que je souhaitais grâce à setTimeOut. Mais comme c'était du "bricolage" (je ne suis pas un expert loin de là), j'ai tenté de suivre ta méthode, sans doute plus propre ?

J'ai dû pas mal adapter, car ma suite d'instructions est en réalité un peu plus complexe. Voici ce que j'ai fait (sans simplification cette fois)… Est-il possible de me dire si ça semble correct ?

J'ai mis un stop() avant le fadeIn (ligne 5) car après la disparition de l'image 1, l'image 2 apparaissait deux fois de suite… (une énigme pour moi, encore une subtilité que j'ai dû louper…).

Si j'ai bien compris la logique, une fonction imbriquée dans une autre + .stop() provoque la succession des deux fonctions, c'est ça ?

Merci encore !
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 $('.boxBody div').stop().slideUp(2000,'linear'); $('html,body').stop().animate({scrollTop: $("#page").offset().top}, 1500, 'easeOutQuad', function(){ $('.content img').fadeOut(500, "linear"); $('.content img.backrub1').stop().fadeIn(1500, "linear"); $('.tabMenu > li').removeClass('open').addClass('close'); $('.tabMenu > li#menu01').removeClass('close').addClass('open'); $('.tabMenu > li').find('a').attr('href',"#top02"); $('.tabMenu > li#menu01').find('a').attr('href',"#page"); $('.boxBody div:eq(' + $('.tabMenu > li#menu01').index('.tabMenu > li') + ')').slideDown(1500,'easeInQuad') }); return true;

Bonsoir

Sans le contexte (CSS, HTML,JS) pour tester...

Je suggère :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
$( '.boxBody div').stop().slideUp( 2000, 'linear', function(){
	$( 'html,body' ).animate({scrollTop: $("#page").offset().top}, 1500, 'easeOutQuad', function(){
		$('.content img').fadeOut(500, "linear", function(){
			$('.content img.backrub1').fadeIn(1500, "linear", function(){
				$('.tabMenu > li').removeClass('open').addClass('close');
				$('.tabMenu > li#menu01').removeClass('close').addClass('open');
				$('.tabMenu > li').find('a').attr('href',"#top02");
				$('.tabMenu > li#menu01').find('a').attr('href',"#page");																												   
				$('.boxBody div:eq(' + $('.tabMenu > li#menu01').index('.tabMenu > li') + ')').slideDown(1500,'easeInQuad')
			});
		});
	});
});

26/07/2013, 21h02
Harlock999

Je reconnais que sans le contexte, ça n'est pas le plus simple 8-)

Ta nouvelle proposition fonctionne, à un détail près : j'ai toujours une boucle au niveau du fadein… en tant que petit scarabée, ça m'échappe un peu. :(

Question annexe : lors de ces animations (retour en haut de la page, divs qui se rediemensionnent…), l'usage du scroll via la souris ou surface tactile, cela provoque de gros à-coups visuels. Y a-t-il moyen de limiter les dégâts ?

J'avais essayé quelque chose avec unbind.mousewheel + plus un plugin (de mémoire), mais ça ne changeait pas grand chose…
26/07/2013, 22h39
danielhagnoul

Sans le contexte (CSS, HTML,JS) pour tester, impossible d'en dire ou d'en faire plus.