javascript - spritesheet 和 css 类哪个更高效

Question

我想在用户点击 div 时实现反馈。 div 将快速褪色为另一种颜色，然后再次恢复为原始颜色。

我的第一个选择是使用 spritesheet，我将在其中更改 div 的背景位置属性。 部分实现如下所示:

pos = 0;
function fadeAction(el){
   if (pos != 100){
     pos += 10;
     $(el).css("background-position","0% "+pos+"%");
     setTimeout(function(){fadeAction(el);},10);
   }else
      pos=0;
   }

我的第二个选择是根据颜色数组更改背景颜色:

colors = ["#FF00FF","#443322", etc]; 
i = 0;
function fadeAction(el){
   if (pos != 10){
     i += 1;
     $(el).css("background-color",colors[i]);
     setTimeout(function(){fadeAction(el);},10);
   }else
      i=0;
   }

我的第三个选择(由于设备不兼容将被废弃)是使用jquery.color。

function fadeAction(el){
  $(el).css("background-color",fadeColor);
  $(el).animate({
    backgroundColor: "#E9E9E9"
  }, 150 );

}

这两种方法(放弃第三种)哪一种最有效？页面上会有多个按钮(div)将使用此功能，并且主要用于带有 webkit 浏览器的移动设备。

Answer 1

使用 CSS3 可以实现最佳性能。这是因为它的浏览器使用硬件加速。

编辑:我错了(感谢 Zougen Moriver)它不会自动触发(请参阅评论)，但它仍然 better performance over the javascript solutions .

这是一个示例:

.test {
    height: 100px;
    width: 100px;
    background-color: #eee;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
  }
.test:hover {
    background-color: #fc3;
}

http://jsfiddle.net/Vandeplas/LZNZb/

我使用悬停是因为它不需要 javascript，但是如果您更改颜色(通过 javascript，通过添加类或更改样式)，它会淡出为该颜色。

缺点是它isn't supported on legacy browsers ..

以下是使用点击处理程序的示例:

$('.test').on('click', function() {
    $(this).css('background-color', 'green');
    //$(this).addClass('otherColor');
});

http://jsfiddle.net/Vandeplas/LZNZb/1/

正如你所看到的，我使用类注释掉了另一个选项...两者都可以工作...