如何使用带有 jQ​​uery 的 CSS background-position 淡化 CSS sprite 图像？

Question

我需要知道如何以正确的效果淡化 CSS 精灵图像。我希望它像零不透明度到完全不透明度效果。

这是我的例子：

http://jsfiddle.net/CppV6/

点击那些按钮，那么它们的效果就不好看了。我需要帮助...

谢谢！

Answer 1

我认为您的主要问题是您只褪色到 50% 的不透明度，我现在已将其更改为 0% 的不透明度。

此外，我还添加了其他几个 tweek，最重要的是第二个排队的“fadeTo”效果，一旦背景位置改变，精灵就会淡入。这只会在第一次淡入淡出完成后调用，给出我相信你正在寻找的效果。

我还将 $("#sprite") 选择器分配给一个全局变量，以节省浏览器执行额外的工作，使 jQuery 更高效。

用小写字母命名 id 和类通常是标准做法，很容易不注意标题命名并花很长时间弄清楚为什么某些东西不起作用。在这种情况下，小写作为编码标准更安全。

$(function(){
  var $sprite = $('#sprite'); 
  $("button#Rainbow").click( function(){
    $sprite.fadeTo(200, 0, function() {
      $sprite.css('background-position','0 0');
    });
    $sprite.fadeTo(200, 1);
  });

  $("button#Esmerald").click( function(){
    $sprite.fadeTo(200, 0, function() {
      $sprite.css('background-position','-152px 0');
    });
    $sprite.fadeTo(200, 1);
  });

  $("button#Ruby").click( function(){
    $sprite.fadeTo(200, 0, function() {
      $sprite.css('background-position','-303px 0');
    });
    $sprite.fadeTo(200, 1);
  });
});