Bonjour,
Je débute avec la bibliothèque jQuery et je tente de créer ma première animation.
Voici le code :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6 <div id="playlistune"> <div id="fiston"><h1 class="titresicbis">West</h1><img src="images/WestCooast.jpg"/ class="anime"></div> <div id="fifille"></div> </div>
Code css : 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 #playlistune { border : 1px red solid; min-width : 1260px; max-width : 1260px; min-height : 450px; max-height : 450px; background : -moz-linear-gradient(#fd8232, #faaa48); background : -webkit-linear-gradient(#fd8232, #faaa48); position : relative; overflow : hidden; } .titresicbis { text-align : right; margin-right : 3px; } #fiston { width : 627px; height :450px; position : absolute; top : 0px; background-color : rgba(192,192,192,0.9); overflow : hidden; } .anime { border : 1px red solid; position : absolute; left : 448px; top : 50px; } #fifille { width : 633px; height :450px; position : absolute; top : 0px; left : 627px; background-color : rgba(192,192,192,0.9); }
Le script (de débutant) :
L'animation saccade et je ne comprends pas pourquoi. Avez-vous des pistes de réflexion à m'apporter ?
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9 $(init); function init(){ $("#playlistune").hover(avant); } function avant(){ $("#fiston").animate({left :"-632px"}, 800, 'linear').siblings("#fifille").animate({left :"1262px"}, 800, 'linear'); }
Partager