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/

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

Answer 2

如果你只是改变平原颜色，CSS样式选项将比spritesheets更有效。浏览器不需要为spritesheet发出额外的HTTP请求，并且使用CSS转换，您将能够在颜色之间淡入淡出。

设备的内存中也会少一个资源。

要转换颜色，请应用此CSS：

.yourElement {
    -webkit-transition: color 150ms;
    transition: color 150ms;
}

..然后继续使用JavaScript切换点击时的颜色变化。

哪个更有效，spritesheet或css类

2 个答案: