Animation de déplacement moche(pixellisée)

**Kamoo** · 24/08/2012, 12h17

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.