ボタンなどCSSで作った影のついたボックスにアニメーションの効果をつけれるのが、この『Shadow animation jQuery plugin』です。

この『Shadow animation jQuery plugin』はCSS3 box-shadow プロパティのボックスへ影を付ける効果を拡張してアニメーション化してくれるものです。

サンプルをご覧下さい。

影をアニメーションさせるjQueryプラグイン『Shadow animation jQuery plugin』サンプル

最新のブラウザに対応しています。


【使用方法】
まずはこちらのShadow animation jQuery pluginのサイトから最新のjQueryプラグインをダウンロードしてきます。クリックしてもダウンロードされないときは、右クリックで対象を保存で保存して下さい。

<head>部分にJavaScriptを読み込む記述をします。

続いてcssを記述しましょう。
CSS3 box-shadow プロパティについては、こちらのサイトを参考にされるとよいと思います。
参考:CSS3 box-shadow プロパティ

以下はサンプルで使用しているコードです。

続いて<body>部分にアクションを起こした時の影の動きを記述します。

例えばbox1要素にマウスオーバーしたときに影をぼかした青(#44f)に変更させて幅を広げて、マウスが外れた時はもとのスタイルに戻すためのコードは次のようになります。

cssに精通している人はいろいろなパターンが作れると思いますので、試してみて下さいね。

以下のサンプルのソースを書いて起きます。どうぞご参考まで。

この記事と関連してると思われる記事: