Question

我创作了一个小型幻灯片。但是，它看起来并不是很顺利。如何使过渡看起来更平滑？

这是相关代码。在这种情况下，wod是一个变量350px。 tranSpeed为1000，是动画发生的时间。我已经尝试将其设置为不同的值，并且仍然得到相同的锯齿状外观。

$('#slideShowInner').stop(true,true).animate({'left':'-=' + wod}, tranSpeed, function (){ autoSlide = setTimeout(fred, slidetime) });

你可以在http://www.en2krew.com/clothing.html

看到我的意思

由于

以下是使用的html代码：

<div id="slideShowWindow">
<div id="slideShowInner">    
<img src="images/clothingphotos/sonnytshirt.jpg" alt="" width="350" height="350" />
<img src="images/clothingphotos/bethtshirt.jpg" alt="" width="350" height="350" />
<img src="images/clothingphotos/mayaelliejesstshirt.jpg" alt="" width="350" height="350" />
<img src="images/clothingphotos/alfiemilessebtshirt.jpg" alt="" width="350" height="350" />
<img src="images/clothingphotos/geehat.jpg" alt="" width="350" height="350" />
<img src="images/clothingphotos/aaronhat.jpg" alt="" width="350" height="350" />
</div>
<div id="buttons">
<img id="clickPrev" src="images/prevButton.jpg" height="17" width="15" />  
<img id="clickNext" src="images/nextButton.jpg" height="17" width="15" />
<div id="pauseHolder">
<img class="clickMe" id="clickPause" src="images/pauseButton.jpg" height="17" width="15" />
</div>
<div class="clearer"></div>
<!-- buttons--></div>
<!-- slideShowWindow --></div>

Answer 1

[回答大修]

我和朋友googles一起研究过。

原来可以是IE，jQuery和<p>标签。

将<p>更改为其他内容。

Answer 2

这不是p标签问题，虽然我注意到后来的jQuery thingies。这个项目中没有p标签。

我认为它可能是边距/填充 - 但是当我把它们取下时仍然会这样做。

最后，我有点“放弃”。一切都很好 - 甚至IE9。在IE8中，它应该是我正在寻找一台笔记本电脑（虽然很好，FF，Saf等都很好......）

我决定和它一起生活。

Answer 3

尝试将左侧位置设置为绝对值，而不是以较小的增量进行迭代：

$('#slideShowInner').stop(true,true).animate({
    'left':'=' + wodFinal //set final value and loop fewer times
}, tranSpeed, 'easingName', function (){ 
    autoSlide = setTimeout(fred, slidetime) 
})

Answer 4

我知道这是一个老问题，但我发现这个tutorial非常有帮助。基本上与利润率有关;填充

动画不是很流畅

4 个答案: