jQuery動畫功能的問題？

我需要一個簡單的三個幻燈片滑塊，所以不要使用我自己編寫的jQ插件。該代碼的作品，但動畫發生在2-3幀，而不是發生在超過20幀，除非在IE6 & IE7，它在20-30幀完美動畫。在所有其他瀏覽器（IE8，Firefox，Chrome，Safari，Opera）中，它似乎都像是電腦掛着的動畫。如果有人知道這是爲什麼發生，請lemme知道。我不想使用笨重的插件，然後設計它。jQuery動畫功能的問題？

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"); 
});

來源

2009-09-17 Aayush

該代碼與我正在使用的jQuery Drop Shadow插件衝突。刪除，使動畫順利。

來源

2009-09-17 12:50:47 Aayush

我懷疑問題出在幻燈片的造型，即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");：

此外，如果你有幻燈片額外的容器，這樣你可能會獲得更好的性能。

來源

2009-09-17 12:10:24

我最初做了容器的事情，因爲它顯然減少了我的jQuery代碼，但是因此我認爲我應該嘗試分別爲每張幻燈片設置動畫效果，但那並沒有真正改變任何內容。我知道關於浮動：左，但刪除它會破壞我的佈局出於某種原因。 – Aayush 2009-09-17 12:49:44

jQuery動畫功能的問題？

回答

相關問題