Question

我喜欢认为我不是假人，但我不能让我的jQuery水平幻灯片动画能够流畅地制作动画，尤其是在FireFox（在Mac上）。有人有意见吗？

动画正在这样做：

$('#lookbook').stop().animate({left: -((lookbook-1)*825)+'px'}, { duration: 800, complete: cap_fade(1)});

示例链接：

http://mayfourteenth.com/w/lookbook?preview=1

Answer 1

我已经在Windows上测试了Firefox，Chrome（dev）和Safari以及所有浏览器中的动画口吃（但在FF中更多）。

要提高JavaScript性能，您可以摆脱所有getElementById或$（“div #mydividentyfier”）调用。如果将它们存储在变量中，则会缓存它们。例：它可以提高性能相当多：

var lookbook = $('#lookbook');
var look_caption = $('#look_caption');
if (lookbook.length) {    
    lookbook.width(lookbook).width()*$('#lookbook img').length)
    if (look_caption) {
        look_caption.html(lookcaps[0]);
        look_caption.fadeIn();
    }

而不是：

if ($('#lookbook').length) {    
    $('#lookbook').width($('#lookbook').width()*$('#lookbook img').length)
    if ($('#look_caption')) {
        $('#look_caption').html(lookcaps[0]);
        $('#look_caption').fadeIn();
    }

我还建议为图像使用数据URI，因为它减少了为加载页面而必须进行的httpRequests数量。

Answer 2

Chrome中的动画看起来很流畅。但是，我相信您可以采取一些措施来提高平滑度：

首先，可以像here一样预先加载所有图像（在顶部）。但是，在"Example link"中同时显示所有这些内容会对效果产生影响，因为它们会立即生成动画：

<div id="lookbook"> 
    <div><img src="/q_images/lib/lookbook/1.jpg"></div> 
    <div><img src="/q_images/lib/lookbook/2.jpg"></div> 
    ...
    <div><img src="/q_images/lib/lookbook/15.jpg"></div> 
</div>

除了这样做之外，您可以简单地定位当前图像两侧的下一张和上一张图像，但在需要之前，不要在页面中包含其余图像。（预加载它们仍然很好。）

其他可以稍微改善性能的事情如下：

使用较小的（按像素和/或文件大小）图像。
通过提前计算事物来进行次要的代码优化。
使用独立的动画库而不是jQuery。

Answer 3

您可能还想使用此

.animate({left:'-=825'}); //next
//and
.animate({left:'+=825'}); //previous

而不是

.animate({left: -((lookbook-1)*825)+'px'});

在Firefox中，jQuery动画不稳定且断断续续

3 个答案: