Question

我正在建立一个有一堆[轨道]旋转木马的网站（在一个页面上），每个旋转木马都有一个播放/暂停按钮。设计师希望旋转木马上的暂停按钮能够产生脉动（即将不透明度从80％改为100％，然后再降低到80％并保持循环）。

我认为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解决方案/方法，请发布它。

Answer 1

CSS3 是在网络上制作动画的方法。以下示例在1和0.8之间切换不透明度（删除-{webkit,moz,o}-前缀以提高可读性）：

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

.pausebutton {
    animation: pulse 4s infinite;
}

或者看到这个jsBin。（是的，暂停/播放按钮也可以在CSS中完成。）

Answer 2

我的答案是，这取决于许多旋转木马如果包含大量图像会对服务器造成太多请求，这将导致页面加载时间的大量减少，当然我不计算图像大小，如果它是文本，这可能会少一些，你使用的jquery代码是好的，另一个建议是@nietonfir的css3代码，但结果是相同的服务器请求，我建议你读这个：Group Multiple Images into One Request and Response for如果使用大量图像，它会大大提高速度，我希望这能回答你的问题。

动画GIF与jQuery动画表演

2 个答案: