Animate par dessus d'autre div

**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

Animate par dessus d'autre div

jQuery

Discussions similaires

Partager

Partager