Question

我试图在导航上使用流畅的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>

Answer 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);

JQuery淡出导航与背景图像。图像不会褪色，文字会褪色

1 个答案: