GX

jQueryでアニメーションエフェクトするライブラリです。


jQueryプラグインな形で書いているコア部分はここらへん。

// jQuery related fns
(function($) {
jQuery.fn.extend({	
	setGX: function(el) {
		if(!el.data('gx')) el.data('gx', new GX().init(el, {}));
		return el;
	},			 
	
	gxInit: function(opts) {
		var set = $(this), jq = this;
		Fns.Each(set, function(el) {
			var el = jq.setGX($(el));
			Fns.Extend(el.data('gx').options, opts, true);	  
		});
		return this;
	},
	
	gx: function(styles, duration, easing, callback) {
		var set = $(this), jq = this;
		Fns.Each(set, function(el) {
			var el = jq.setGX($(el)), gx = el.data('gx');
			(typeof styles == 'string') ? gx[styles]() : gx.anime(GX.unlink(styles), duration, easing, callback);		  
		});
		return this;
	}
});
})(jQuery);

戻り値の型がjQuery型なので、メソッドチェーンで書けます。
こんな感じ。

$('#el8').gx({'width': 400, 'height': 300, 'background-color': '#f0f'}, 4000, 'Linear')
	.gx({'width': 140, 'height': 440, 'background-color': '#ff0'}, 2000, 'Linear')
	.gx({'width': 100, 'height': 100, 'background-color': '#06C'}, 4000, 'Linear');


GX 1.2
http://gx.riccardodegni.net/