GX - Full-Featured Javascript Animations Framework

Demos/Extras

Fade:

$(this).fadeOut(2000)
       .fadeIn(1000)
       .fadeOut(2000, 'Bounce');

$(this).fadeToggle(2000)
       .fadeToggle(1000)
       .fadeToggle(2000, 'Bounce');

$(this).fade('out', [2000])
       .fade('in', [4000])
       .fade('out', [2000, 'Bounce']);

Fade me! (out-in-out)
Fade me! (toggle)
Fade me! (one method)

Slide:

$(this).slideOut(2000)
       .slideIn(1000)
       .slideOut(2000, 'Bounce');

$(this).slideToggle(2000)
       .slideToggle(1000)
       .slideToggle(2000, 'Bounce');

$(this).slide('out', [2000])
       .slide('in', [4000])
       .slide('out', [2000, 'Bounce']);

$(this).slideOut(2000, 'horizontal')
       .slideIn(1000, 'horizontal')
       .slideOut(2000, 'Bounce', 'horizontal');

Slide me! (out-in-out)
Slide me! (toggle)
Slide me! (one method)
Slide me! (out-in-out | horizontal)

Gradient:

$(this).gradient('red', [2000])
       .gradient('#FFFF66', [4000])
       .gradient('#ff00ff', [2000, 'Bounce']);

$(this).gradient('green', [2000])
       .gradient('#00FFCC', [2000])
       .gradient('#CC99CC', [4000, 'Bounce']);

$(this).gradient('green', [2000, 'fg'])
       .gradient('red', [2000, 'fg'])
       .gradient('#CC99CC', [4000, 'Bounce', 'fg']);

Click me! (hot colors)
Click me! (cold colors)
Click me! (fg gradient)

Show/Hide:

$(this).hide(2000)
       .show(3000, 'Bounce')
       .hide(2500, 'Elastic')
       .show(3000);
	
$(this).hide();

Hide/Show me!
Hide/Show me (no transition)!

Move:

$(this).move(100, 100, [1200])
       .move(-300, -100, [2000, 'Bounce'])
       .move(20, 200, [1000, 'Back'])
       .move(0, 0, [1000]);
	
$(this).move(0, '+=100', [1200])
       .move('-=300', 0, [2000, 'Elastic'])
       .move('+=400', 200, [1000, 'Back'])
       .move(0, 0, [1000]);

Move me!
Move me!

Scale:

$('#el17').click(function() {
	$(this).scale(200, 200, [1200])
		.scale(100, 100, [2000]);
});

$('#el18').click(function() {
	$(this).scale("+=100px", "+=100px", [1200]);
});

Scale me!
Scale me!

Multi:

$(this).move(100, 100, [1200])
	.move(-300, -100, [2000, 'Bounce'])
	.gradient('#00FFCC', [2000])
	.move(20, 200, [1000, 'Back'])
	.fadeOut(2000)
	.fadeIn(2000)
	.gradient('red', [2000])
	.move(0, 0, [1000]);

$('#el16').gxInit({delay: 2000});

$(this).move(100, 100, [1200])
	.move(-300, -100, [2000, 'Bounce'])
	.gradient('#00FFCC', [2000])
	.move(20, 200, [1000, 'Back'])
	.fadeOut(2000)
	.fadeIn(2000)
	.gradient('red', [2000])
	.move(0, 0, [1000]);

Click me! Combo!
Click me! Combo with delay!