鼠标上背景图像的JQuery淡入淡出效果

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

我的结构：

---

在这段代码中是pic，它在鼠标上方打开。

我尝试过，但我不确定这个解决方案是否只使用css

需要jquery库

更新：

如果您希望使用Jquery，那么应该使用.fadeTo（持续时间，不透明度）

下面是一个快速代码示例

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

菲德尔：

---

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

菲德尔：
以下是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;
}

---

为什么他要添加一个包含css属性

background:red？问题是css3 transition不完全支持背景图像属性。我的图像应该褪色，而不是背景颜色=）。问题是css3 transition属性不适用于他希望添加到的背景图像
：hover
。哦，我的英语太差了..=）我想要的是jquery效果而不是css。对于旧浏览器，你的方法不起作用，对于它们，我将使用悬停而不褪色，并为新浏览器添加带有jquery的褪色。感谢你的代码示例，但我如何在我的代码和背景图像上使用它？如果我尝试使用过渡，按钮中的文本必须具有不透明度。它只适用于另一个结构。。。
$('.fade')
  .on('mouseenter', function(){$(this).fadeTo(400,.5);})
  .on('mouseleave', function(){$(this).fadeTo(400,1);});

.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;
}