Altérer position de deux div [Résolu]

[paul0440]

Bonsoir,

Voila un bon moment que je cherche une solution pour réaliser une petite animation en JS et JQuery.
Alors j'explique : en fait il y a plusieurs div (disons 4), aligner horizontalement, chacun d'eux porte un id du genre pos1 pos2 pos3 pos4.
Je souhaiterai que quand on click sur le premier div (pos1) il prenne la place du troisième et que le troisième prenne celle du premier. J'ai essayé en modifiant le id a chaque fin d'animation mais la fonction click reste pour pos1 qui se trouve désormais en troisième position...

La je viens d'essayer ceci :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Initialisation des position
var position1 = 'pos1';
var position3 = 'pos3';
// Click Pos1
$('#'+position1).click(function(){
	document.getElementById(position1).style.zIndex = 3;
	document.getElementById(position3).style.zIndex = 1;
	$('#'+position1).animate({
		left:400,
		top:60
	}, 200, function(){
		position1 = 'pos3';
	});
	$('#'+position3).animate({
		left:180,
		top:10
	}, 200, function(){
		position3 = 'pos1';
	});
});

Mais malheureusement sa me donne le même résultat...

Quelqu'un aurait une piste ?

[RomainVALERI]

Plutot que de switcher les div par leur id ou un autre moyen : as-tu envisagé la possibilité de laisser les divs là où ils sont avec leurs fonctions, mais de ne switcher que le contenu ? La fonction liée à ton pos1 resterait "en place" puisqu'elle serait associée au conteneur et non au contenu.

Mais bon : ça dépend aussi fortement de ce que contiennent les fameux div.
Dis-nous en plus.

[paul0440]

merci pour la rapidité de ta réponse romainvaleri. En fait je souhaite que se soit animer et pas un simple transfert de contenu. Dans chaque div il y plusieurs images et textes, j'explique plus precisement le système : chaque div se presente au debut avec simplement une image de fond. Au premier click il passe au milieu puis au deuxième click il s'élargit et le contenu apparait. Cependant pour un meilleur aspect visuel je souhaiterai animer chaque action a l'aide de jQuery

[RomainVALERI]

Oui, ça ne change rien : tu déplaces effectivement bien ton div avec tout ce qu'il contient, mais tu l'enrobes avec un autre div qui, lui, porte la fonction de clic ^^

[paul0440]

ah oui effectivement c'est une excellente solution ! Merci beaucoup