1

我正在构建一个站点，其中包含一堆 [orbit] 轮播（在一个页面上），每个轮播都有一个播放/暂停按钮。设计师希望轮播上的暂停按钮能够跳动（即将不透明度从 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 解决方案/方法，请发布。

4

2 回答 2

3

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-17T20:17:34.560 回答
0

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

于 2013-10-17T20:23:58.847 回答