Besoin d'aide pour une animation

Sujet résolu

15 juillet 2016 à 22:20:22

Bonsoir !

Alors voilà, j'ai une page avec des images d'afficher lorsque je clique sur une image cette dernière ce centre au milieu de la page et derrière elle un fond noir apparaît empêchant le clique sur les autres images, si je clique sur l'image centrée le fond noir disparaît et l'image centrée retourne à sa place d'origine, tout cela fonctionne le problème j'aimerais que l'on puisse cliquer sur ce fond noir pour pouvoir remettre l'image à sa place d'origine. En gros Facebook fait cela, lorsque vous cliquer sur une photo de profil, si vous cliquer à côté la photo disparaît on est pas obligé de cliqué sur la croix.

Je vous montre mon code qui fonctionne en javascript:

var position=0;
function deplacer(img, blockInfo){
	
	if($("#fondnoir").css("display")=="none" && position == 0 && position != 1){
		position=1;
		$("#fondnoir").fadeIn(300);
			if(img == "#Acoustic"){
				$(img).css("zIndex","21");
				$(img).animate({height: "+=100px",
								width: "+=50px",
								left:"+=351px",
								top: "+=100px"},500, function(){
													$("#InfoMateriel").fadeIn(300);
													});
				$(blockInfo).css("display","block");
			}
			else if(img == "#Boost"){
				$(img).css("zIndex","21");
				$(img).animate({height: "+=50px",
								width: "+=50px",
								left:"+=66px",
								top: "+=200px"},500, function(){
													$("#InfoMateriel").fadeIn(300);
													});
				$(blockInfo).css("display","block");
			}
			else if(img == "#Phaser"){
				$(img).css("zIndex","21");
				$(img).animate({height: "+=50px",
								width: "+=50px",
								left:"-=219px",
								top: "+=200px"},500, function(){
												$("#InfoMateriel").fadeIn(300);
												});
				$(blockInfo).css("display","block");
			}
			else if(img == "#Polytuner"){
				$(img).css("zIndex","21");
				$(img).animate({height: "+=100px",
								width: "+=50px",
								left:"-=409px",
								top: "+=200px"},500, function(){
												$("#InfoMateriel").fadeIn(300);
												});
				$(blockInfo).css("display","block");
			}
			else if(img == "#Chorus"){
				$(img).css("zIndex","21");
				$(img).animate({height: "+=50px",
								width: "+=50px",
								left:"+=68px",
								top: "+=40px"},500, function(){
												$("#InfoMateriel").fadeIn(300);
												});
				$(blockInfo).css("display","block");
			}
			else if(img == "#Talkbox"){
				$(img).css("zIndex","21");
				$(img).animate({height: "+=50px",
								width: "+=50px",
								left:"-=218px",
								top: "+=40px"},500, function(){
												$("#InfoMateriel").fadeIn(300);
												});
				$(blockInfo).css("display","block");
			}
			else if(img == "#lespaul"){
				$(img).css("zIndex","21");
				$(img).animate({height: "+=100px",
								width: "+=50px",
								left:"-=649px",
								top: "+=100px"},500, function(){
												$("#InfoMateriel").fadeIn(300);
												});
				$(blockInfo).css("display","block");
			}
			else if(img == "#Fuzzslash"){
				$(img).css("zIndex","21");
				$(img).animate({height: "+=50px",
								width: "+=50px",
								left:"+=355px",
								top: "-=190px"},500, function(){
												$("#InfoMateriel").fadeIn(300);
												});
				$(blockInfo).css("display","block");
			}
			else if(img == "#Tremolo"){
				$(img).css("zIndex","21");
				$(img).animate({height: "+=50px",
								width: "+=50px",
								left:"+=80px",
								top: "-=190px"},500, function(){
												$("#InfoMateriel").fadeIn(300);
												});
				$(blockInfo).css("display","block");
			}
			else if(img == "#Univibe"){
				$(img).css("zIndex","21");
				$(img).animate({height: "+=50px",
								width: "+=50px",
								left:"-=208px",
								top: "-=190px"},500, function(){
												$("#InfoMateriel").fadeIn(300);
												});
				$(blockInfo).css("display","block");
			}
			else if(img == "#Orange"){
				$(img).css("zIndex","21");
				$(img).animate({height: "+=50px",
								width: "+=100px",
								left:"+=85px",
								top: "-=450px"},500, function(){
												$("#InfoMateriel").fadeIn(300);
												});
				$(blockInfo).css("display","block");
			}
			else if(img == "#Whawha"){
				$(img).css("zIndex","21");
				$(img).animate({height: "+=50px",
								width: "+=100px",
								left:"-=335px",
								top: "-=450px"},500, function(){
												$("#InfoMateriel").fadeIn(300);
												});
				$(blockInfo).css("display","block");
			}
			else if(img == "#Strat"){
				$(img).css("zIndex","21");
				$(img).animate({height: "+=100px",
								width: "+=50px",
								left:"-=570px",
								top: "-=350px"},500, function(){
												$("#InfoMateriel").fadeIn(300);
												});
				$(blockInfo).css("display","block");
			}
			 setTimeout(function(){position = 2;},800);
			
	}
	else if($("#fondnoir").css("display")=="block" && position == 2 && position != 1){
		position=1;
		$("#InfoMateriel").fadeOut(300);
		$("#fondnoir").fadeOut(300);
			if(img == "#Acoustic"){		
				$(img).animate({height: "-=100px",
								width: "-=50px",
								left:"-=351px",
								top: "-=100px"},500, function(){	
								$(img).css("zIndex","20");
								});
				$(blockInfo).css("display","none");
			}
			else if(img == "#Boost"){
				$(img).animate({height: "-=50px",
								width: "-=50px",
								left:"-=66px",
								top: "-=200px"},500, function(){	
								$(img).css("zIndex","20");});
				$(blockInfo).css("display","none");
			}
			else if(img == "#Phaser"){
				$(img).animate({height: "-=50px",
								width: "-=50px",
								left:"+=219px",
								top: "-=200px"},500, function(){	
								$(img).css("zIndex","20");});
				$(blockInfo).css("display","none");
			}
			else if(img == "#Polytuner"){
				$(img).animate({height: "-=100px",
								width: "-=50px",
								left:"+=409px",
								top: "-=200px"},500, function(){	
								$(img).css("zIndex","20");});
				$(blockInfo).css("display","none");
			}
			else if(img == "#Chorus"){
				$(img).animate({height: "-=50px",
								width: "-=50px",
								left:"-=68px",
								top: "-=40px"},500, function(){	
								$(img).css("zIndex","20");});
				$(blockInfo).css("display","none");
			}
			else if(img == "#Talkbox"){
				$(img).animate({height: "-=50px",
								width: "-=50px",
								left:"+=218px",
								top: "-=40px"},500, function(){	
								$(img).css("zIndex","20");});
				$(blockInfo).css("display","none");
			}
			else if(img == "#lespaul"){
				$(img).animate({height: "-=100px",
								width: "-=50px",
								left:"+=649px",
								top: "-=100px"},500, function(){	
								$(img).css("zIndex","20");});
				$(blockInfo).css("display","none");
			}
			else if(img == "#Fuzzslash"){
				$(img).animate({height: "-=50px",
								width: "-=50px",
								left:"-=355px",
								top: "+=190px"},500, function(){	
								$(img).css("zIndex","20");});
				$(blockInfo).css("display","none");
			}
			else if(img == "#Tremolo"){
				$(img).animate({height: "-=50px",
								width: "-=50px",
								left:"-=80px",
								top: "+=190px"},500, function(){	
								$(img).css("zIndex","20");});
				$(blockInfo).css("display","none");
			}
			else if(img == "#Univibe"){
				$(img).animate({height: "-=50px",
								width: "-=50px",
								left:"+=208px",
								top: "+=190px"},500, function(){	
								$(img).css("zIndex","20");});
				$(blockInfo).css("display","none");
			}
			else if(img == "#Orange"){
				$(img).animate({height: "-=50px",
								width: "-=100px",
								left:"-=85px",
								top: "+=450px"},500, function(){	
								$(img).css("zIndex","20");});
				$(blockInfo).css("display","none");
			}
			else if(img == "#Whawha"){
				$(img).animate({height: "-=50px",
								width: "-=100px",
								left:"+=335px",
								top: "+=450px"},500, function(){	
								$(img).css("zIndex","20");});
				$(blockInfo).css("display","none");
			}
			else if(img == "#Strat"){
				$(img).animate({height: "-=100px",
								width: "-=50px",
								left:"+=570px",
								top: "+=350px"},500, function(){	
								$(img).css("zIndex","20");});
				$(blockInfo).css("display","none");
			}
			 setTimeout(function(){position = 0;},500);
			
	}
}

à savoir que "img" correspond à l'image sur laquelle je clique, et "blockInfo" c'est un block qui apparaît avec les information de l'image voilà, si vous avez des questions pour comprendre mon code n'hésité pas ahah

Donc si vous pouvez m'aider à trouver un moyen, et/ou améliorer mon code merci!!

"La sincérité est la fin et le commencement de toutes choses, sans la sincérité, rien n'existerait."

DT-Sodium

17 juillet 2016 à 0:13:49

Houla, c'est un sacré merdier tout ça, tu ferais bien de réorganiser le tout avant que ça devienne impossible à maintenir.

Tu peux utiliser la méthode trigger de jQuery qui sert à simuler un évènement sur un autre élément.

$('#fondNoir').click(function()
{
$('#boutonFermeture').trigger('click');
});

ChercheurInfo

17 juillet 2016 à 20:29:11

Mdrrr bah si il y a autant de condition, c'est parce que je sais pas comment centrer un élément automatiquement en position:absolute; et de plus je sais pas le faire retourner à sa place automatiquement du coup j'ai mit les valeurs moi même d'où le fait qu'il y ait autant de conditions.

J'ai utilisé trigger ça marche parfaitement merci beaucoup; si vous avez quelque chose qui pourrais me permettre d'améliorer ce code s'il vous plaît je suis partant ahah

Merci!!

-
Edité par ChercheurInfo 17 juillet 2016 à 21:33:25

"La sincérité est la fin et le commencement de toutes choses, sans la sincérité, rien n'existerait."

DT-Sodium

17 juillet 2016 à 23:52:15

Une alternative simple et déjà beaucoup plus propre serait de stocker toutes tes valeurs dans un tableau.

ChercheurInfo

18 juillet 2016 à 12:47:56

Stocker dans un tableau genre les id, les valeurs de ps et zindex? mais au final ça ne va pas alléger mais simplifier si je veux modifier on est d'accord? (je vais le faire) merci

encore d'autres idées?

"La sincérité est la fin et le commencement de toutes choses, sans la sincérité, rien n'existerait."

MarlburroW

18 juillet 2016 à 13:06:36

Il me semble que tu peu centrer du absolute, essaie ça:

position:absolute;
margin:auto;
top:0;
bottom:0;
right:0;
left:0;

DT-Sodium

18 juillet 2016 à 13:49:34

ChercheurInfo a écrit:

Stocker dans un tableau genre les id, les valeurs de ps et zindex? mais au final ça ne va pas alléger mais simplifier si je veux modifier on est d'accord? (je vais le faire) merci encore d'autres idées?

Ben tu crées un tableau (ou plutôt un objet, les tableaux en JavaScript ne permettant pas l'utilisation de chaînes de caractères comme clé) ou tu stockes les valeurs possibles puis tu ne fais qu'une seule animation en piochant les valeurs dans cet objet.

var settings = {
	Accoustic:
	{
		height:100,
		width:50,
		left:351,
		top:100
	},
	Boost:
	{
		height:50,
		width:50,
		left:66,
		top:200
	}
	//.......
};

var currentSetting = settings[idDeLaPhoto];

$(img).css("zIndex","21")
.animate
({
	height: "+=" + currentSetting.height + "px",
    width: "+=" + currentSetting.width + "px",
    left:"+=" + currentSetting.left + "px",
    top: "+=" + currentSetting.top + "px"
},500);

Là avec ce que tu as fait, non seulement chaque changement devra être répercuté sur chaque condition avec autant de chances de faire une erreur mais surtout si un autre développeur doit récupérer ton travail, il risque fortement d'avoir envie de te remercier à coups de pelle.

ChercheurInfo

18 juillet 2016 à 23:04:27

Ahhh merci pour l'objet j'avais complètement oublié ça -_- !

Et pour le centrer une image automatiquement merci ça marche mais comment je peux faire pour lorsque je clique sur une image elle retourne à sa place initiale (comme quand la page vient d'être chargée) sans réactualiser la page genre initialement elle est à 50px de la marge à droite je clique dessus elle se centre, et je reclique dessus et la j'aimerais qu'elle retourne à sa place donc 50px de la marge à droite mais sans avoir à rentrer dans le code "-=50" merci

"La sincérité est la fin et le commencement de toutes choses, sans la sincérité, rien n'existerait."

DT-Sodium

24 juillet 2016 à 10:44:27

Heu ben c'est difficile à évaluer sans être en train de travailler sur le machin mais typiquement moi ce que je fais quand j'ai besoin de stocker des valeurs pour les récupérer plus tard sur un élément HTML, j'utilise les attributs data de HTML5 http://www.alsacreations.com/article/lire/1397-html5-attribut-data-dataset.html

// Animation d'affichage

$(img).attr('data-original-left', -50);
$(img).animate({/*...*/});

// Animation de fermeture

var originalLeft = parseInt($(img).attr('data-original-left');

$(img).animate(
{
   left: originalLeft
});

-
Edité par DT-Sodium 24 juillet 2016 à 10:45:00

ChercheurInfo

25 juillet 2016 à 2:41:01

Ah ouais merci beaucoup c'est pas mal

"La sincérité est la fin et le commencement de toutes choses, sans la sincérité, rien n'existerait."