通过jQuery淡入/淡出悬停 [英] fade in/out hover by jQuery

问题描述

我正在尝试通过jQuery向按钮添加一个简单的淡入/淡出效果，但是我有点想淡出淡入淡出.我使用以下代码:

I'm trying to add a simple fade in/out effect to the buttons by jQuery but I'm a bit stuck with fading out. I use this code:

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

它添加了一个悬停类，该类定义了css背景并淡入了悬停图像.但是，当我将光标移出按钮时，它只会像往常一样消失，而不会褪色.

It adds a hover class which defines a css background and fade the hover image in. But when I move a cursor out of the button, it simply disappears as normally, no fading out.

您能帮我吗?

非常感谢所有回复

推荐答案

这两个函数彼此相反，因此应该起作用...(更新代码)

These two functions are opposites of each other, so should work... (code updated)

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

但是，您仍然有一个问题:您正在淡化整个链接的内外效果，不仅是图像.据我所知，您不能单独设置背景图像的不透明度(如果手动设置完全不透明度已经很麻烦了……)

However, you still have a problem: you're fading the whole link in or out, not only the image. As far as I know, you cannot set background image opacity separately (setting full opacity is already a pain if you do it manually...)

这篇关于通过jQuery淡入/淡出悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！