2

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

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

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

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

非常感谢所有回复

4

3 回答 3

3

这两个功能是相互对立的，所以应该可以工作......（代码更新）

$('#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/上查看它的实际效果。

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

于 2010-07-27T11:57:30.710 回答
3

就像在 SO 上多次回答一样，您需要在动画完成后callbacks使用from jQueryfx methods来做任何事情。

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

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

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

于 2010-07-27T11:57:41.783 回答
2

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

而且我不知道它是否有用但是:hovercss中有一个伪类，请参见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 做很多事情

于 2010-07-27T12:15:50.207 回答