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/