Problemi con la funzione animata jQuery?

Question

Avevo bisogno di un semplice cursore a tre diapositive, quindi invece di usare un plugin jQ l'ho codificato a mano. Il codice funziona ma l'animazione si verifica in 2-3 fotogrammi anziché in oltre 20 fotogrammi, tranne quando in IE6 & amp; IE7 dove si anima perfettamente in 20-30 fotogrammi. In tutti gli altri browser (IE8, Firefox, Chrome, Safari, Opera) si anima in un movimento che sembra che il computer sia sospeso. Se qualcuno sa perché questo accade, per favore fammi sapere. Non voglio usare un plug-in ingombrante e quindi anche lo stile.

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

Il codice stava scontrandosi con il plug-in jQuery Drop Shadow che stavo usando. Rimozione che ha reso l'animazione fluida.

Answer 2

Sospetto che il problema risieda nello stile delle diapositive, vale a dire il float: left - è ridondante, dato che usi il posizionamento assoluto.

Inoltre, potresti ottenere prestazioni migliori se disponi di un contenitore aggiuntivo di diapositive, come questo:

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

In questo modo puoi animare solo il contenitore, $ ('# slide-container'). animate ({left: 0}, " slow "); - e il codice risultante sarà più pulito.