2009-09-17 59 views
0

我需要一個簡單的三個幻燈片滑塊,所以不要使用我自己編寫的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"); 
}); 

回答

0

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

3

我懷疑問題出在幻燈片的造型,即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

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