Slider une div sur une autre div au choix

**godjojo** · 14/02/2012, 12h50

Bien le bonjour à tous,

n'étant pas encore un pro de jquery, je me permet de faire appel à la communauté afin d'éclairer ma lanterne...

Voici mon problème...

J'ai 2 div, l'une à coté de l'autre... J'aimerai qu'au survol de l'une d'elle, celle-ci s'agrandisse, et que l'autre diminue. Et inversément...

J'y suis plus ou moins arrivé, mais j'ai un bug d'affichage, les div ne se suivent pas exactement, il y a toujours un léger décalage...

Voici mon code:

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  <head>
    <title>ma page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
 
    <script>
    $(function(){ 
		/* Ici votre code JS */ 
		// Couleur de fond.
		$('body').css({
			'background-color': '#fff',
			margin:	'0px',
			height: '100%'
		});
 
		$('html').css({
			'background-color': '#fff',
			margin:	'0px',
			height: '100%'
		});
 
		// Formatage première div.
		$('#one')
		  .css({
			background: '#0f0',
			width:	'50%',
			height: '100%',
			color: '#44b',
			'float': 'left',
			marginbottom: '0px',
			opacity: 1
		  	});
 
 
 
		// Formatage seconde div.
		$('#two')
		  .css({
			background: '#0ff',
			width:	'50%',
			height: '100%',
			color: '#44b',
			'float': 'right',
			marginbottom: '0px',
			opacity: 1
		  	});
 
 
 
 
 
 
		});
 
 
		$(document).ready(function () {
 
			$('#one').mouseover(function () {
 
 
				$('#one').stop().animate({
					width : '90%'
					}
					,300);
 
			});
 
 
			$('#one').mouseout(function () {
 
 
				$('#one').stop().animate({
					width : '10%'
					}
					,300);
 
			});
 
			$('#two').mousemove(function () {
 
 
				$('#two').stop().animate({
					width: '90%'
					}
					,300);
 
			});
 
 
			$('#two').mouseout(function () {
 
 
				$('#one').stop().animate({
					width : '10%'
					}
					,300);
 
			});
 
		});
 
 
			</script>
  </head>
  <body>
 
 
 
    <div id="one"><h1>Premier Div</h1>
    </div>
 
    <div id="two"><h1>Second Div</h1>
    </div>
 
 
 
 
  </body>
</html>

Merci d'avance à tous...

**danielhagnoul** · 14/02/2012, 20h28

Bonsoir

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
$('#one').hover(
	function(){
		$( "#two" ).stop().animate( { "width" : "10%" }, 300 );
		$( this ).stop().animate( { "width" : "90%" }, 300);
	},
	function(){
		$( this ).stop().animate( { "width" : "10%" }, 300);
		$( "#two" ).stop().animate( { "width" : "90%" }, 300 );
	}
);
 
$('#two').hover(
	function () {
		$( "#one" ).stop().animate( { "width" : "10%" }, 300 );
		$( this ).stop().animate( { "width" : "90%" }, 300 );
	},
	function () {
		$( this ).stop().animate( { "width" : "10%" }, 300 );
		$( "#one" ).stop().animate( { "width" : "90%" }, 300 );
	}
);

**godjojo** · 15/02/2012, 09h20

merci beaucoup...

En effet, le petit retard est de loin moins important.

J'aimerai effectuer la même chose, mais en faisant glisser la div de gauche, à l'éxtérieur de l'explorateur, et inversèment... Car si je place des éléments dans ces div, et que je réduis la taille de ceux ci, cela ne fonctionnera pas...?

Dois-je toujours utiliser animate ou passer par une autre méthode?

Slider une div sur une autre div au choix

jQuery

Discussions similaires

Partager

Partager