Animation de type slide saccadée

Bonjour,

Je débute avec la bibliothèque jQuery et je tente de créer ma première animation.

Voici le code :

Code:

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:

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) :

Code:

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');
}

L'animation saccade et je ne comprends pas pourquoi. Avez-vous des pistes de réflexion à m'apporter ?