Demos/Core

Simple animation:

$('#el1').gx({'width': 200, 'height': 200, 'border-width': 8}, 2000, 'Linear', function(el) { el.html('Completed!'); });
Click Me!

Colors animation:

$('#el2').gx({'width': 200, 'height': 200, 'color': 'red', 'background-color': '#ff00ff', 'border-width': 8, 'border-color': '#fa0'}, 4000, 'Linear', function(el) { el.html('Completed!'); });
Click Me!

Easing animation:

$('#el3').gx({'width': 300, 'height': 300, 'font-size': 20}, 4000, 'Bounce', function(el) { el.html('Completed!'); });
Click Me!

Relative animation:

$('#el4').gx({'width': '+=300px', 'height': '+=300px', 'font-size': '+=20px'}, 4000, 'Elastic');
Click Me!

Multi-Unit animation:

$('#el5').gx({'width': '200px', 'height': '200px', 'font-size': '4em'}, 4000, 'Elastic');
Click Me!

Canceling animations:

$('#el6').gxInit({queue: 'cancel'});

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

$('#el7').gxInit({queue: 'cancel'});

$('#el7').hover(function() {
	$('#el7').gx({'width': 500}, 4000, 'Linear');
}, function() {
	$('#el7').gx({'width': 100}, 400, 'Linear');
});
Hover Me!
Hover Me!

Queuing animations:

$('#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');
Click Me!

Queuing relative animations:

$('#el1').gx({'top': '-=40'}, 200)
	.gx({'top': '+=180'}, 1000)
	.gx({'left': '-=40'}, 200)
	.gx({'left': '+=480'}, 1000)
	.gx({'top': '+=40'}, 200)
	.gx({'top': '0'}, 1000)
	.gx({'left': '+=40'}, 200)
	.gx({'left': '0'}, 1000);
Click me!

Pause/Resume animations:

$('#el9').click(function() {
	$('#el9').gx({'width': '400px', 'font-size': '20px'}, 4000, 'Bounce');
});

$('#pause_9').click(function() {
	$('#el9')gx.('pause');
});

$('#resume_9').click(function() {
	$('#el9').gx('resume');
});
pause | resume
Click Me!

Delay animations:

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

$('#el18').gx({'width': '200px'}, 4000, 'Bounce', setText)
	  .gx({'height': '20px'}, 2000, 'Linear', setText)
	  .gx({'left': '180px'}, 1800, 'Bounce', setText)
	  .gx({'left': '0px'}, 1800, 'Bounce', setText)
	  .gx({'width': '100px'}, 2000, 'Linear', setText);
Click Me!

Complete callback animations:

$('#el11').gx({'width': '400px', 'font-size': '20px', 'background-color': '#f0f'}, 4000, 
'Bounce', function(el) { el.html('Complete!'); });
Click Me!

Start/Complete callbacks animations:

$('#el10').gx({'width': '400px', 'font-size': '20px', 'background-color': '#f0f'}, 4000,
 'Linear', {
	start: function(el) { el.html('Start!'); },
	complete: function(el) { el.html('Complete!'); }
});
Click Me!

"Toggle" animations:

$('#el12').gx({opacity: 'toggle'})
		  .gx({opacity: 'toggle'})
		  .gx({opacity: 'toggle'})
		  .gx({opacity: 'toggle'})
		  .gx({opacity: 'toggle'})
		  .gx({opacity: 'toggle'});
		
$('#el13').gx({height: 'toggle'})
		  .gx({height: 'toggle'})
		  .gx({height: 'toggle'})
		  .gx({height: 'toggle'})
		  .gx({height: 'toggle'})
		  .gx({height: 'toggle'});

$('#el14').gx({width: 'toggle'})
		  .gx({width: 'toggle'})
		  .gx({width: 'toggle'})
		  .gx({width: 'toggle'})
		  .gx({width: 'toggle'})
		  .gx({width: 'toggle'});
Toggle my opacity!
Toggle my height!
Toggle my width!