マウスオーバー時にフェード処理をさせるJQueryプラグインは沢山あります。シンプルで実装が簡単なものからアニメーションの細かい設定が出来るものまで様々あります。 しかし、これがCSSスプライトで作ったコンテンツに対してとなると、作りが大きく変わってしまうので、imgタグに属性付けをするようなタイプのJQueryプラグインでは対応できない・・・ そこで今回はhoverfadeというJQueryプラグインを使用させていただき、CSSスプライトで作ったコンテンツにフェードアクションを付与する方法を解説していきます。IE7、8にもしっかり対応しているのでオススメです。 hoverfadeの設定・マークアップ方法 まずは、作製者さんのHPよりjsファイルをダウンロードしましょう。 http://www.danwellman.co.uk/plugin-update-hoverfade-1-0-2/
![CSSスプライトをフェードアニメーションさせるJQueryプラグイン「hoverfade」の使い方 | 株式会社WEB企画](https://cdn-ak-scissors.b.st-hatena.com/image/square/b4d4a5a463b3ec56f5e66808e455b921f2c661bc/height=288;version=1;width=512/https%3A%2F%2Fwebkikaku.co.jp%2Fhomepage%2Fwp-content%2Fuploads%2F2020%2F01%2Ftop-ogp-1200x630.png)