Slider une div sur une autre div au choix
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:
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...
