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 callbacks中的fx methods在动画完成后执行任何。

$('#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('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做很多事情

jQuery淡入/淡出悬停

3 个答案: