[JS]サイズやカラーをアニメーションで変更できる超軽量のスクリプト -GX

サイト構築 -JavaScript

サイズやカラーをアニメーションで変更できる、クロスブラウザ対応の超軽量（10KB）のスクリプト「GX」を紹介します。

デモのキャプチャ

キャプチャは、イージングのアニメーションでサイズ変更しています。
スクリプトは、下記のようになります。

$('#el6').hover(function() {
	$('#el6').gx({'width': 500, 'font-size': 18}, 4000, 'Bounce');
}, function() {
	$('#el6').gx({'width': 100, 'font-size': 12}, 400, 'Linear');
});

デモは他にも、カラーの変更、不透明度の変更などもあり、アニメーションのポーズやレジューム機能も備えています。

GXの対応ブラウザは、IE 6+, Firefox 2+, Opera 9.25+, Safari 3+, Google Chromeとのことです。

GXはjQueryのプラグインのため、実装にはjquery.jsが必要です。

Related Posts

Post on:2009年3月16日

Trackback

leave your Comments

©2011 coliss