0

我正在尝试对我的导航使用平滑的 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>
4

1 回答 1

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);
于 2013-09-01T04:09:48.317 回答