gpt4 book ai didi

jquery - 如何使用带有 jQ​​uery 的 CSS 背景位置来淡化 CSS Sprite 图像?

转载 作者:太空宇宙 更新时间:2023-11-04 16:14:22 25 4
gpt4 key购买 nike

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

有我的例子:

http://jsfiddle.net/CppV6/

点击那些按钮,然后他们的效果看起来不太好。我需要帮助...

谢谢!

最佳答案

我认为你的主要问题是你只淡化到 50% 的不透明度,我现在已经将其更改为 0% 的不透明度。

此外,我还添加了其他几个 tweeks,最重要的是第二个排队的“fadeTo”效果,一旦背景位置发生变化, Sprite 就会淡入淡出。只有在第一个淡入淡出完成后才会调用此方法,从而提供我相信您正在寻找的效果。

我还将 $("#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 - 如何使用带有 jQ​​uery 的 CSS 背景位置来淡化 CSS Sprite 图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7814429/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com