[Résolu] Animer body et html au premier clic seulement

Bonjour,

Je fais apparaître une boite sous une série de "pavés", (chaque pavé est relié à une boîte masquée) et j'anime le body et html.
Au clic pour fermer cette boîte, j'anime dans l'autre sens.

Tout va bien si je ferme les boîtes ouvertes à chaque fois.
SI j'en ouvre une alors que la première est déjà ouverte, cela cumule mon animation de body

Je pense que si j'arrive à ne la faire que sur le premier clic, cela résoudrait mon problème, je n'en suis même pas vraiment sure .

A tout hasard voici mon code

$(".pave-pro li").css({"cursor" : "pointer"});

	$(".pave-pro li").click(function(){
		$(".pave").hide();
		$(".pave",this).fadeIn("slow");
		 $('html, body').stop().animate({scrollTop: '+=350px'}, 800);
		$(".w836").animate({"marginTop" : "350px"}); //pousse la boîte d'en dessous
		return false;
	});

	
		$(".close-pave").click(function(){ //quand on ferme la boîte
		$(".pave").hide();
		$(".w836").animate({"marginTop" : "150px"});
		 $('html, body').stop().animate({scrollTop: '-=350px'}, 800);
		return false;
	});

Auriez vous des idées ?

Merci

Bonjour.

Aurais-tu un exemple en ligne (ou codepen ou jsfiddle) ? Parce que ton histoire de pavé relié à des boites masquées, j'avoue ne pas avoir tout saisi.

EDIT : sinon, si tu veux et comme je le comprends faire une animation qu'une seule fois, je te propose de sauvegarder cette information quelque part.

Pour faire cela très simplement, tu peux ajouter une classe sur un de tes éléments html (par exemple le body), et tu testes ensuite ça pour faire ton animation à chaque clic (un if avec hasClass)
Modifié par SolidSnake (10 Mar 2015 - 14:48)

Merci de la réponse, mais je patauge

J'ai mis en ligne le morceau de ma page concerné.
J'ai ajouté pour l'exemple une div au-dessus et une en-dessous pour simuler mon contenu au dessus et en-dessous de mon bout de code à problème.

http://mcbenveniste.com/alsa/

Merci

En fait, je vois un truc comme ça :

var $body = $('body');

$(".pave-pro li").click(function(e){
	e.preventDefault();

	...

	if ( !$body.hasClass('alreadyScroll') ) {
		$body.addClass('alreadyScroll')
		$('html, body').stop().animate({scrollTop: '+=350px'}, 800);
	}

	...
});


$(".close-pave").click(function(e){ //quand on ferme la boîte
	e.preventDefault();

	...
	$body.removeClass('alreadyScroll')
});

Sinon, personnellement je verrais plus une animation type scrollTo qui te ferait scroller directement sur la boite que tu ouvres.

Merci beaucoup, c'est super d'avoir regardé et proposé une solution

Cela fonctionne très bien pour faire apparaître les éléments cachés et que cela ne multiplie pas les scroll

mais je n'arrive plus à re-masquer les éléments ...
je n'ai peut-être pas tout bien fait ...

j'ai remis en ligne : http://mcbenveniste.com/alsa/

Pour le plugin, je n'ai pas été dans ce sens car je vais avoir plusieurs autres plugins, à terme dans le site, je voulais minimiser.,, et en plus cela m'apprend plein de choses intéressantes, en cherchant aussi.

En fait j'ai changé pour

$(".pave-pro li").css({"cursor" : "pointer"});
	
	var $body = $('body');
	$(".pave-pro li").click(function(){
	

	$(".pave").hide();
	$(".pave",this).fadeIn("slow");

	if ( !$body.hasClass('alreadyScroll') ) {
		$body.addClass('alreadyScroll')
		$('html, body').stop().animate({scrollTop: '+=250px'}, 800);
		$(".w836").animate({"marginTop" : "350px"});
	}
	return false;
});


$(".close-pave").click(function(){//quand on ferme la boîte
	$body.removeClass('alreadyScroll')
	$(".pave").hide();
	$(".w836").animate({"marginTop" : "60px"});
	return false;
});

e.preventDefault(); posait semble-t-il problème.

Je n'ai jamais compris la différence avec le return false
ou peut-être je mélange tout ?

En tous cas un grand merci

Bonjour.

Avais-tu bien penser à mettre l'objet "e" (comme event) en paramètre de ton écouteur "click" ?

Je préfère cette écriture car une différence apparemment avec return false semble exister, ce dernier arrête en même la propagation de l'événement dans l'arbre DOM après le nœud sur lequel il se trouve, contrairement au preventDefault().

Bonjour,

Sans doute, non je n'avais pas mis l'objet "e" (comme event) en paramètre de ton écouteur "click"

Car je viens de le refaire comme ça et ça fonctionne très bien.


Merci encore, cela faisait pas mal de temps que je passais la-dessus, mais je ne suis pas pro de jquery
Merci aussi pour l'explication.

Bonne journée