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:
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 <!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>
Merci par avance.
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 }
Partager