当前位置：文江博客话题详情

如何使用 CSS 背景位置和 jQuery 淡化 CSS 精灵图像？

发布于 2024-12-10 09:45:11 字数 213 浏览 0 评论 0原文

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

我的例子是：

http://jsfiddle.net/CppV6/

单击这些按钮，然后它们的效果不会看起来不错。我需要帮助...

谢谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

桃扇骨 2024-12-17 09:45:11

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

此外，我还添加了其他几个周，最重要的是第二个排队的“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);
  });
});

I think that your main problem was that you were only fading to 50% opacity, I have changed this to 0% opacity now.

In addition I have added a couple of other tweeks, the most important being a second queued 'fadeTo' effect that fades the sprite back in once the background-position has been changed. This will only be called once the first fade has completed, giving the effect I believe you are looking for.

I have also assigned the $("#sprite") selector to a global variable to save the browser performing additional work, making the jQuery more efficient.

It is generally standard practise to name id's and classes with lowercase letters, it is all too easy not to notice titlecase naming and spend ages figuring out why something isn't working. Lowercase is safer as a coding standard in this instance.

$(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);
  });
});

回复收藏 0 原文

~没有更多了~