GIF动画与jQuery的动画性能

我建立这有一堆[轨道]转盘（单页）一个网站，每个转盘将有一个播放/暂停按钮。设计师希望传送带上的暂停按钮脉动（即将不透明度从80％改变为100％，并将其降低至80％并保持循环）。GIF动画与jQuery的动画性能

我在想，GIF动画会少一个性能命中比使用jQuery的，因为我们在页面上10+转盘（不要问为什么）。我想知道我是否正确。

jQuery代码我会用会是这样的（我还没有编码的，所以不介意语法错误）：

function pb_animate() { 
     $('.pausebutton').animate({opacity:0.8}, 300[ms], function() { 
      $('.pausebutton').animate({opacity:1.0}, 300[ms], function() { 
       pb_animate() 
      } 
     } 
    }

那么这将是在这种情况下更好：jQuery的或动画GIF？还是我不担心什么？如果您有更好的jQuery解决方案/方法，请发布。

来源

2013-10-17 user2891893

我还去用CSS，看到@ nietonfir的答案。 – Shomz

CSS3是走在网络上的动画的方式。下面的示例1切换和0.8（除去-{webkit,moz,o}-前缀可读性）之间的不透明度：

@keyframes pulse { 
    0%, 100% { 
     opacity: 1; 
    } 
    50% { 
     opacity: 0.8; 
    } 
} 

.pausebutton { 
    animation: pulse 4s infinite; 
}

或者看到此jsBin。（是的，暂停/播放按钮，可以在CSS要做的事。）

来源

2013-10-17 20:17:34 nietonfir

@matewka它不仅回答了它，而且还显示了最快和性能最低的网页动画解决方案：CSS3！ – Shomz

这是真的。我只是没有注意到这个解决方案的任何描述。甚至没有关于这是CSS的信息。 OP现在应该如何呢？ – matewka

@matewka我明白你的观点。虽然，严格来说，我会看到更像是研究/知识扩展机会的答案，尤其是因为有两条评论说这是一个很好的解决方案。再次，不是每个人都是这样，我同意很多人喜欢盘子上的一切。 – Shomz

我的答案是，这取决于很多转盘如果包含大量的图片会产生太多请求到服务器，这将导致大幅减少在页面加载时，当然我不计算图片大小，如果是文本，这可能会少一点，你使用的jquery代码是好的，另一个建议是@ nietonfir的css3代码，但结果是相同的它涉及到服务器请求，我建议你阅读这个：Group Multiple Images into One Request and Response因为它将大幅度提高速度，如果使用大量的图像，我希望这回答了你的问题。

来源

2013-10-17 20:23:58

GIF动画与jQuery的动画性能

回答

相关问题