[JS]サイズやカラーをアニメーションで変更できる超軽量のスクリプト -GX
Post on:2009年3月16日
サイズやカラーをアニメーションで変更できる、クロスブラウザ対応の超軽量(10KB)のスクリプト「GX」を紹介します。
キャプチャは、イージングのアニメーションでサイズ変更しています。
スクリプトは、下記のようになります。
1 2 3 4 5 6 7 |
<textarea name="code" class="html" cols="60" rows="5"> $('#el6').hover(function() { $('#el6').gx({'width': 500, 'font-size': 18}, 4000, 'Bounce'); }, function() { $('#el6').gx({'width': 100, 'font-size': 12}, 400, 'Linear'); }); </textarea> |
デモは他にも、カラーの変更、不透明度の変更などもあり、アニメーションのポーズやレジューム機能も備えています。
GXの対応ブラウザは、IE 6+, Firefox 2+, Opera 9.25+, Safari 3+, Google Chromeとのことです。
GXはjQueryのプラグインのため、実装にはjquery.jsが必要です。
sponsors