JQuery使用背景图像进行淡入淡出导航。图像赢得'；t褪色，文本将

我试图在导航中使用平滑的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;
}

我的JQUERY

$(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>

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

ps：您可以放置两个元素，一个覆盖另一个（一个透明，另一个不透明），并同时更改其不透明度。例如—

CSS:

HTML:

---

请创建一个JSFIDLE。显然，您已经创建了自己的名为

.switchClass（）

的方法，查看该代码也会有所帮助。@DevlshOne是否

.switchClass（）

不是jQuery UI库的一部分？

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

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

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

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