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

私の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>
4

1 に答える 1

1

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

すべてのスタイルをアニメーション化できるわけではありません。たとえば、背景画像をアニメーション化する方法はありません。アニメーション化できないスタイルは、アニメーションの最後に変更されます。

ps: 2 つの要素を重ねて配置し (1 つは透明でもう 1 つは非透明)、それらの不透明度を同時に変更できます。例 - 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 に答える