mouseenter上背景图像的jQuery淡入淡出效果答案

【问题标题】：JQuery fade effect for background image on mouseentermouseenter上背景图像的jQuery淡入淡出效果
【发布时间】：2014-10-15 05:01:39
【问题描述】：

我想在一个按钮的 mouseenter 上为我的导航添加一个 JQuery 淡入淡出效果。我已经在我的 CSS 中创建了鼠标悬停样式，但对于没有激活 javascript 的浏览器没有淡入淡出。

我的结构：Jsfiddle

#menu li:hover {
 background-image: url(http://file2.npage.de/012690/81/bilder/menu_sub_hover.png);
 }

在这段代码中是图片，它在鼠标悬停时打开。

【问题讨论】：

标签： jquery background-image fade effect mouseenter

【解决方案1】：

我试试，但我不确定这个解决方案，也许只使用 css

需要 jquery 库！

FIDDLE

$("#navi li a").hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
});

【讨论】：

他为什么要添加一个包含css属性background: red;的类？问题是 css3 过渡不完全支持 background-image 属性。
我的图像应该褪色而不是背景颜色 =)。

【解决方案2】：

更新：

如果你想使用 Jquery，那么你应该使用 .fadeTo(duration, opacity)

这是一个快速的代码示例

$('.fade')
  .on('mouseenter', function(){$(this).fadeTo(400,.5);})
  .on('mouseleave', function(){$(this).fadeTo(400,1);});

菲德尔：http://jsfiddle.net/eoze559h/7/

如果你想做一个淡入淡出，为什么不也用 CSS 来做呢？

菲德尔：http://jsfiddle.net/eoze559h/5/
下面是 CSS 代码示例：

.fade {

    opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
      opacity: 0.5;
}

【讨论】：

问题是css3过渡属性不适用于他想添加到:hover..的背景图像。
哦，对不起，我的英语太糟糕了.. =) 我想要一个 jquery 效果而不是 css。
对于旧浏览器将无法使用您的方法，对于他们来说，我将使用不带淡入淡出的悬停并为新浏览器添加带有 jquery 的淡入淡出。
感谢您的代码示例，但我如何在我的代码和背景图像上使用它？
如果我尝试使用过渡，按钮中的文本必须具有不透明度。它只适用于其他结构...