Bonjour,

Je me lance dans le jQuery et je teste des choses assez simples.
Je fais une animation qui déplace une div dans une autre.
Ca marche correctement mais l'animation n'est pas belle: sur les côtés de la div qui se déplace, pendant l'animation, on voit clairement que ce n'est pas fluide (sorte d'escaliers de pixels, la voyez-vous?).

Je vous laisse mon css et mon code, si vous avez des conseils à me donner n'hésitez pas.

Le HTML avec le script:
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
<!DOCTYPE html>
<html>
<head><!-- ... --></head>
<link rel="stylesheet" href="style.css" type="text/css" /> 
<body>
    <div id="page">
		<img id="imgfl" src="fleche.png">
		<div id="partImg"></div>		
</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#imgfl").click(function(){
		$('#partImg').animate({ left:"0px" },'slow');
                $("#imgfl").animate({ left:"580px" },'slow');
    });
});
 
</script>
</body>
</html>
Le CSS:
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
#page{
	width:960px;
	height:550px;
	background-color:grey;
	margin-left:auto;
	margin-right:auto;
	position:relative;
}
#fenetre{
	text-align:center;
	position:relative;
}
#partImg{
	background-color:blue;
	position:absolute;
	height:550px;
	width:576px;
	left:384px;
	z-index:3;
}
#imgfl{
	position:absolute;
	left:360px;
	top:300px;
	z-index:4
}
Merci par avance.