我正在尝试通过 jQuery 为按钮添加一个简单的淡入/淡出效果，但我有点卡在淡出上。我使用此代码：
$('#header #menu li a').hover(function () {
$(this).fadeOut(0).addClass('hover').fadeIn(300);
},
function () {
$(this).fadeOut(0).removeClass('hover').fadeIn(0);
});
它添加了一个悬停类，它定义了一个 css 背景并将悬停图像淡入。但是当我将光标移出按钮时，它会像往常一样消失，不会淡出。
你能帮我解决这个问题吗？
非常感谢大家的回复
【问题讨论】：
这两个功能是相反的，所以应该可以工作......（代码更新）
$('#header #menu li a').hover(function () {
$(this).fadeOut(0).addClass('hover').fadeIn(300);
},
function () {
$(this).fadeOut(300)
.queue(function(){ $(this).removeClass('hover').fadeIn(0).dequeue() });
});
这太丑了......在http://jsfiddle.net/zS6ex/上看到它的实际效果。
但是，您仍然有一个问题：您正在淡入或淡出整个链接，而不仅仅是图像。据我所知，您不能单独设置背景图像不透明度（如果手动设置完全不透明度已经很痛苦了......）
【讨论】：
fadeIn/fadeOut 和show/hide 时遇到了不好的经历。回调方法应该可以工作，但似乎没有......我没有调查过。这段代码会吃掉时间和空间，但太少而无法注意到任何地方。我认为当你必须小心你的程序适合那三千字节的内存时，编程会更有趣......但我当时不在。
就像在 SO 上多次回答一样，您需要使用 jQuery fx methods 中的 callbacks 来执行动画完成后的任何操作。
$('#menu li a').hover(function(){
$(this).fadeOut('fast', function(){
$(this).addClass('hover').fadeIn(300);
});
}, function(){
});
无论如何，调用.fadeOut(0) 会淡出该元素，根本没有动画，就像即时一样。第一个参数是持续时间。
【讨论】：
fadeOut(0) 没有动画，添加类时为什么不直接隐藏它
$('#header #menu li a').hover(function () {
$(this).hide().addClass('hover').fadeIn(300);
},
function () {
$(this).hide().removeClass('hover').show();
// as there is no fading time the line above will be equal to
$(this).removeClass('hover');
});
当你在动画完成后需要做一些事情时，你应该使用回调$(...).fadeIn(400,function(){ alert('this is the callback'); }，如果你不使用回调，代码会在动画进行时运行。
我不知道它是否有用，但 css 中有一个伪类 :hover，请参阅 here
支持 :hover 伪类 在所有主流浏览器中。
这样你就可以做各种各样的事情了：
#header #menu li a:hover { ...set style of 'a' when over 'a' }
#header #menu li:hover a { ...set style of 'a' when over 'li' }
稍微玩一下，你可以用 css 做很多事情
【讨论】：