如何在jQuery中使用CSS背景位置淡出CSS精灵图像？

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

下面是我的例子：

单击这些按钮，它们的效果看起来不太好。我需要帮助

---

谢谢

我认为您的主要问题是，您的不透明度仅为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);
  });
});

---

哇，我不知道变量可以节省浏览器的性能，使jQuery更高效。不管怎样，我测试了它，它工作了，你的答案非常有用，谢谢！没问题，我很高兴能帮上忙。如果您想了解更多关于jQuery的信息，我建议您使用它，它简洁且编写良好。如果你想得到更多的阅读建议，请询问。我把这篇博文作为书签，我是一名设计师，不是程序员，但我喜欢学习，如果我在开发方面有问题，我会很快在这里询问！谢谢