Functions / animate
animate(parameters, [duration], [easing], [onstep], [fn])
animate(object parameters)
animate(object parameters, positive int duration)
animate(object parameters, positive int duration, function fn)
animate(object parameters, positive int duration, object easing)
animate(object parameters, positive int duration, object easing, function fn)
animate(object parameters, positive int duration, object easing, object onstep, function fn)

animate(object parameters)
return: object
You can use animate function just to set parameters, if you use it without duration.
Code
<script type="text/javascript">	
	function start_1(idCanvas)
	{
		jc('#myCircle_1')
			.animate({x:175,radius:5});
	}
	function stop_1(idCanvas)
	{
		jc.clear(idCanvas);
		onload_1(idCanvas);
	}
	function onload_1(idCanvas)	
	{	
		jc.start(idCanvas,true);
		jc.circle(100,120,50,'#ff0000',1)
			.id('myCircle_1');
	}
</script>
<canvas id="canvas_1" width="250px" height="265px">
</canvas>
View
animate(object parameters, positive int duration)
return: object
Code
<script type="text/javascript">	
	function start_2(idCanvas)
	{
		jc('#myCircle_2').animate({x:175,radius:5,color:'#000000'},2000);
	}
	function stop_2(idCanvas)
	{
		jc.clear(idCanvas);
		onload_2(idCanvas);
	}
	function onload_2(idCanvas)	
	{	
		jc.start(idCanvas,true);
		jc.circle(100,120,50,'#ff0000',1)
			.id('myCircle_2');
	}
</script>
<canvas id="canvas_2" width="250px" height="265px">
</canvas>
View
animate(object parameters, positive int duration, function fn)
return: object
You can set a callback function.
Code
<script type="text/javascript">	
	function start_3(idCanvas)
	{
		jc('#myCircle_3')
			.animate({x:175,radius:5},700,function(){
				this.color('#00ff00');
			});
	}
	function stop_3(idCanvas)
	{
		jc.clear(idCanvas);
		onload_3(idCanvas);
	}
	function onload_3(idCanvas)	
	{	
		jc.start(idCanvas,true);
		jc.circle(100,120,50,'#ff0000',1)
			.id('myCircle_3');
	}
</script>
<canvas id="canvas_3" width="250px" height="265px">
</canvas>
View
animate(object parameters, positive int duration, object easing)
return: object
You can set easing function by defining easing object. By default its 'linear' with type 'in'. You can set also functions 'exp' (with optional parameter n), 'circ', 'sine', 'back' (with optional parameters n and x), 'elastic' (with optional parameters n,m,k,x), 'bounce' (with optional parameters n,b). You can add your own easing functions with jc.addAnimateFunction().
Code
<script type="text/javascript">	
	function start_4(idCanvas)
	{
		jc('#myCircle_4')
			.animate({x:175,radius:25},2000,{type:'inOut', fn:'elastic', n:1.5});
	}
	function stop_4(idCanvas)
	{
		jc.clear(idCanvas);
		onload_4(idCanvas);
	}
	function onload_4(idCanvas)	
	{	
		jc.start(idCanvas,true);
		jc.circle(100,120,50,'#ff0000',1)
			.id('myCircle_4');
	}
</script>
<canvas id="canvas_4" width="250px" height="265px">
</canvas>
View
animate(object parameters, positive int duration, object easing, function fn)
return: object
Code
<script type="text/javascript">	
	function start_5(idCanvas)
	{
		jc('#myCircle_5')
			.animate({x:175,radius:25},2000,{type:'out', fn:'exp'}, function(){
				this.color('#ffffff');
			});
	}
	function stop_5(idCanvas)
	{
		jc.clear(idCanvas);
		onload_5(idCanvas);
	}
	function onload_5(idCanvas)	
	{	
		jc.start(idCanvas,true);
		jc.circle(100,120,50,'#ff0000',1)
			.id('myCircle_5');
	}
</script>
<canvas id="canvas_5" width="250px" height="265px">
</canvas>
View
animate(object parameters, positive int duration, object easing, object onstep, function fn)
return: object
You can set function to call at each step of animation with onstep parameter. onstep is the object, onstep.fn is function to call.
Code
<script type="text/javascript">	
	function start_6(idCanvas)
	{
		jc('#myCircle_6')
			.animate({x:175},2000,{type:'in', fn:'linear'}, {fn:onstep});
	}
	function onstep()
	{
		this.animate({y:'+=2'});
	}
	function stop_6(idCanvas)
	{
		jc.clear(idCanvas);
		onload_6(idCanvas);
	}
	function onload_6(idCanvas)	
	{	
		jc.start(idCanvas,true);
		jc.circle(100,60,50,'#ff0000',1)
			.id('myCircle_6');
	}
</script>
<canvas id="canvas_6" width="250px" height="265px">
</canvas>
View