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动画功能的问题？

回答

相关问题