Animate par dessus d'autre div [Résolu]

nims · 28/01/2011, 23h46

Bonsoir à tous!

J'ai deux colonnes côte à côte.
Chaque colonne contient des #DIV les uns en dessous des autres.

J'aimerais animer un #DIV (augmenter height et width) par dessus les autres sans que ces derniers bougent...

J'arrête pas de faire des tests mais sans succès, une condition manque toujours... Je jongle avec les positions et zindex mais toujours pas...

Comment faire cela ?
Merci pour votre aide!

danielhagnoul · 29/01/2011, 01h23

Bonsoir

J'ai fait un test et j'en arrive aux conclusions suivantes.

J'ai deux colonnes côte à côte : le positionnement peut être relatif et les dimensions en pourcentage, cela n'influence pas.

Chaque colonne contient des #DIV les uns en dessous des autres : ces divisions doivent avoir un positionnement absolu et une dimension fixe, les variations de dimensions, lors de l'animation, doivent se faire en pixels et mon en pourcentages.

Voici le code de test :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:612px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
		#droite {
			float:right;
			width:48.5%;
			height: 600px;
			padding:6px;
			border:1px solid grey;
		}
		#gauche {
			float:left;
			width:48.5%;
			height: 600px;
			padding:6px;
			border:1px solid lightgreen;
		}
		div.testg, div.testd {
			position:absolute;
			width:480px;
			height:160px;
			border:1px solid red;
			margin-bottom:6px;
			z-index:1;
		}
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
		<div id="droite">
			<div class="testg" style="top:70px;left:50px;background-color:grey;"></div>
			<div class="testg" style="top:240px;left:50px;background-color:yellow;"></div>
			<div class="testg" style="top:410px;left:50px;background-color:green;"></div>
		</div>
		<div id="gauche">
			<div class="testd" style="top:70px;left:660px;background-color:red;"></div>
			<div class="testd" style="top:240px;left:660px;background-color:blue;"></div>
			<div class="testd" style="top:410px;left:660px;background-color:orange;"></div>
		</div>
	</div>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script>
		$(function(){
			$("div.testg").hover(
				function(){
					$(this).stop(true, true).css("z-index", 9999).animate({
						"width": "+=120px",
						"height": "+=60px"
					}, "slow");
				},
				function(){
					$(this).stop(true, true).animate({
						"width": "-=120px",
						"height": "-=60px"
					}, "slow").css("z-index", 1);
				}
			);
 
			$("div.testd").hover(
				function(){
					$(this).stop(true, true).css("z-index", 9999).animate({
						"width": "+=60px",
						"height": "+=120px"
					}, "slow");
				},
				function(){
					$(this).stop(true, true).animate({
						"width": "-=60px",
						"height": "-=120px"
					}, "slow").css("z-index", 1);
				}
			);
		});
	</script>
</body>  
</html>

nims · 30/01/2011, 12h34

Bonjour,

Parfait ton petit test !
Quelques modifications et j'ai pu me l'adapter !

Merci pour ton aide

28/01/2011, 23h46	#1
nims Membre du Club Étudiant Inscription : juillet 2005 Messages : 267 Détails du profil Informations professionnelles : Activité : Étudiant Informations forums : Inscription : juillet 2005 Messages : 267 Points : 58 Points : 58	Animate par dessus d'autre div Bonsoir à tous! J'ai deux colonnes côte à côte. Chaque colonne contient des #DIV les uns en dessous des autres. J'aimerais animer un #DIV (augmenter height et width) par dessus les autres sans que ces derniers bougent... J'arrête pas de faire des tests mais sans succès, une condition manque toujours... Je jongle avec les positions et zindex mais toujours pas... Comment faire cela ? Merci pour votre aide! __________________ Blog : http://alacoche.geekos.fr/ Donnez votre voix pour 2012 : http://www.votelibre.fr/
	00

30/01/2011, 12h34	#3
nims Membre du Club Étudiant Inscription : juillet 2005 Messages : 267 Détails du profil Informations professionnelles : Activité : Étudiant Informations forums : Inscription : juillet 2005 Messages : 267 Points : 58 Points : 58	Bonjour, Parfait ton petit test ! Quelques modifications et j'ai pu me l'adapter ! Merci pour ton aide __________________ Blog : http://alacoche.geekos.fr/ Donnez votre voix pour 2012 : http://www.votelibre.fr/
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email