我认为你的主要问题是你只淡化到 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);
});
});
我是一名优秀的程序员,十分优秀!