[JS]CSSスプライトにフェードや移動、不透明度の変更を加えるスクリプト -bgFade

マウスホバー時に背景画像をフェードで変更させ、更にアニメーションでの移動や不透明度の変更もできるスクリプトを紹介します。

jQuery bgFade Plugin
デモ

デモでは3つのエフェクトが公開されています。

フェードで画像を変更

フェードで画像を変更、15px下に移動

フェードで画像を変更、不透明度を0.5に

スクリプトの実装

HTML

class名は自由に設定できます。

<div class="myButton">
   Any text content you want here
</div>

CSS

変更後のスタイルのclass名には「span.bg_fade」を含めます。また、display, height, widthは必ず指定します。

.myButton {
   position:relative;
   height: 75px;
   width: 500px;
   cursor:pointer;
   display:block;
   background: url('button.png') no-repeat top left;
}

.myButton span.bg_fade {
   position: absolute;
   display:none;
   top: 0;
   left: 0;
   height: 75px;
   width: 500px;
   background:url('button.png') no-repeat 0px -75px;
}

JavaScript

オプションでフェードのスピード、移動量、不透明度などを設定できます。

$('.myButton').hover(function(){
      $(this).bgFade('fadeIn');
}, function() {
      $(this).bgFade('fadeOut');
});