Problème avec la fonction d'animation jQuery?

Question

J'avais besoin d'un simple curseur de trois diapositives, donc au lieu d'utiliser un plugin jQ je l'ai codé à la main moi-même. Le code fonctionne mais l'animation se produit dans 2-3 images au lieu de se produire dans plus de 20 cadres, sauf dans IE6 & IE7 où il s'anime parfaitement dans 20-30 images. Dans tous les autres navigateurs (IE8, Firefox, Chrome, Safari, Opera), il s'anime dans un mouvement qui semble comme suspendu. Si quelqu'un sait pourquoi cela se passe s'il vous plaît lemme savoir. Je ne veux pas utiliser un plugin volumineux et le styler aussi.

HTML:

<div class="fl-left" id="slide-box"> 
<div class="slide" id="slide-1"> 
    <img src="images/slider/1.jpg" alt="The Image Description" /> 
    <p class="slide-text">&quot;The Description About The Image/Slide&quot;</p> 
</div> 

<div class="slide" id="slide-2"> 
    <img src="images/slider/1.jpg" alt="The Image Description" /> 
    <p class="slide-text">&quot;The Description About The Image/Slide&quot;</p> 
</div> 

<div class="slide" id="slide-3"> 
    <img src="images/slider/1.jpg" alt="The Image Description" /> 
    <p class="slide-text">&quot;The Description About The Image/Slide&quot;</p> 
</div> 
</div> 

CSS:

#slide-box{ 
position:relative; 
width:472px; 
height:192px; 
border-bottom:3px solid #fff; 
overflow:hidden; 
} 

.slide{ position:absolute; 
float:left; width:455px; 
overflow:hidden; 
border:1px solid #000; 
margin:8px 8px 0 8px; 
} 

.slide img{ float:left; } 
.slide-text{ display:block; 
width: 140px; 
height:132px; 
background:#ecefdc; 
float:left; 
padding: 10px 0px; 
} 

#slide-1 { left:0px; } 
#slide-2 { left:467px; } 
#slide-3 { left:934px; } 

jQuery:

$('#slide-but-1').click(function(){ 
$('#slide-1').animate({"left": "0px"}, "slow"); 
$('#slide-2').animate({"left": "467px"}, "slow"); 
$('#slide-3').animate({"left": "934px"}, "slow"); 
}); 
$('#slide-but-2').click(function(){ 
$('#slide-1').animate({"left": "-467px"}, "slow"); 
$('#slide-2').animate({"left": "0px"}, "slow"); 
$('#slide-3').animate({"left": "467px"}, "slow"); 
}); 
$('#slide-but-3').click(function(){ 
$('#slide-1').animate({"left": "-934px"}, "slow"); 
$('#slide-2').animate({"left": "-467px"}, "slow"); 
$('#slide-3').animate({"left": "0px"}, "slow"); 
}); 

Answer 1

Le code était en conflit avec le plugin jQuery Drop Shadow que j'utilisais. Enlever cela a rendu l'animation lisse.

Answer 2

Je pense que le problème réside dans le style des diapositives, à savoir la float: left - il est redondant , puisque vous utilisez le positionnement absolu.

De plus, vous pouvez obtenir de meilleures performances si vous avez un conteneur supplémentaire des diapositives, comme ceci:

<div class="fl-left" id="slide-box"> 
    <div id="slide-container"> 
     <div class="slide" /> 
     <div class="slide" /> 
     <div class="slide" /> 
    </div> 
</div> 

De cette façon, vous pouvez animer uniquement le conteneur, $('#slide-container').animate({ left: 0 }, "slow"); - et le code résultant sera plus propre.