Проблема с функцией анимации jQuery? - PullRequest
Новая
       25

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

0 голосов
/ 17 сентября 2009

Мне нужен был простой слайдер с тремя слайдами, поэтому вместо использования плагина 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");
});

Ответы [ 2 ]

3 голосов
/ 17 сентября 2009

Я подозреваю, что проблема заключается в стилизации слайдов, а именно 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"); - и полученный код будет чище.

0 голосов
/ 17 сентября 2009

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

...