带有背景图像的 JQuery 淡化导航。图片不会褪色，文字会答案

【问题标题】：JQuery Fade Navigation with Background Image. Image won't fade, text will带有背景图像的 JQuery 淡化导航。图片不会褪色，文字会
【发布时间】：2013-08-31 22:46:54
【问题描述】：

我正在尝试在我的导航上使用平滑的 JQuery 淡入淡出类交换效果。我的问题是淡入淡出效果仅适用于文本，而不适用于背景图像。如何让背景图像在悬停时与文本一起淡入淡出？

我的 CSS：

#nava {
  text-align:center;
  width: 170px;
  height: 110px;
}

.style1 {
  background-image: url(buttons/home_off.png);
  background-size:170px 110px;
  background-repeat:no-repeat;
  width: 170px;
  height: 110px;
  display: block;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
}

.style2 {
  background-image: url(buttons/home_on.png);
  background-size:170px 110px;
  background-repeat:no-repeat;
  width: 170px;
  height: 110px;
  display: block;
  color: #4DAC61;
  font-family: Arial, Helvetica, sans-serif;
}

我的查询

$(document).ready(function() {
  $("#nava a").mouseenter(function () {
    $(this).switchClass('style1', 'style2', 200);
  });

  $("#nava a").mouseleave(function () {
    $(this).switchClass('style2', 'style1', 600);
  });
});

我的 HTML

<div id="nava">
  <a class="style1" href="index.html"><br /><br /><br />HOME</a>
</div>

【问题讨论】：

请创建一个 jsFiddle。显然，您已经创建了自己的名为 .switchClass() 的方法，查看该代码也会有所帮助。
@DevlshOne 是 .switchClass() 不是 jQuery UI 库的一部分？

标签： jquery jquery-ui hover background-image

【解决方案1】：

http://api.jqueryui.com/switchClass/

并非所有样式都可以设置动画。例如，无法为背景图像设置动画。任何无法动画的样式都会在动画结束时进行更改。

ps：您可以放置两个元素，一个在另一个之上（一个透明，另一个不透明），并同时更改它们的不透明度。举个例子——http://jsfiddle.net/23HAU/

CSS：

.style1 {
    background: url(image1.jpg);
}
.style2 {
    background: url(image2.jpg);
    display: none;
}

.style1, .style2 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0px;
    left: 0px;
}

HTML：

   <div class='style1'></div>
   <div class='style2'></div>

还有 jQuery 代码：

   $('.style1').fadeOut(2000);
   $('.style2').fadeIn(2000);

【讨论】：