通过 jQuery 淡入/淡出悬停

Question

我正在尝试通过 jQuery 向按钮添加简单的淡入/淡出效果，但我有点坚持淡出。我使用这段代码：

$('#header #menu li a').hover(function () {
  $(this).fadeOut(0).addClass('hover').fadeIn(300);
},
function () {
  $(this).fadeOut(0).removeClass('hover').fadeIn(0);
});

它添加了一个悬停类，该类定义了 css 背景并使悬停图像淡入。但是当我将光标移出按钮时，它只是像平常一样消失，没有淡出。

你能帮我解决这个问题吗？

非常感谢所有的回复

Answer 1

这两个函数是相反的，所以应该可以工作...（代码已更新）

$('#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/。

但是，您仍然遇到一个问题：您正在淡入或淡出整个链接，而不仅仅是图像。据我所知，你不能单独设置背景图像不透明度（如果你手动设置完全不透明度已经很痛苦了......）

Answer 2

就像在 SO 上多次回答的那样，您需要使用 jQuery fx 方法 中的回调来执行动画完成后的任何操作。

$('#menu li a').hover(function(){
    $(this).fadeOut('fast', function(){
        $(this).addClass('hover').fadeIn(300);
    });
}, function(){
});

无论如何，调用 .fadeOut(0) 会淡出该元素，根本没有动画，就像即时一样。第一个参数是持续时间。

http://api.jquery.com/fadeOut/

Answer 3

为什么不在添加类时隐藏它，因为 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('这是回调'); }，如果您不使用回调，则代码会在动画运行时运行，

我不知道它是否有用，但有一个伪类 >:hover 在 css 中，请参见此处

支持 :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 做很多事情