Проблема с функцией анимации jQuery?

Question

Мне нужен был простой слайдер с тремя слайдами, поэтому вместо использования плагина jQ я сам его закодировал. Код работает, но анимация происходит в 2-3 кадрах вместо того, чтобы происходить в более чем 20 кадрах, за исключением случаев, когда в IE6 & IE7, где он отлично анимируется в 20-30 кадрах. Во всех других браузерах (IE8, Firefox, Chrome, Safari, Opera) он оживляет движение, похожее на то, что компьютер висит. Если кто-нибудь знает, почему это происходит, пожалуйста, дайте понять. Я не хочу использовать громоздкий плагин, а затем его тоже.

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

Этот код сталкивался с плагином jQuery Drop Shadow, который я использовал. Удаление сделало анимацию гладкой.

Answer 2

Я подозреваю, что проблема заключается в стилизации слайдов, а именно float: left - это излишний , поскольку вы используете абсолютное позиционирование.

Кроме того, вы могли бы достичь более высокой производительности, если у вас есть дополнительный контейнер слайдах, как это:

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

Таким образом, вы могли бы анимировать только контейнер, $('#slide-container').animate({ left: 0 }, "slow"); - и полученный код будет чище.