.animte( animation_params_json )
.animate() function animates all the matched HTML Elements in Nedil Objects. It takes animation parameters as input and returns an 'ID' called animation Id which can be used for future reference of the animation.
.animate() function is applied to Nedil.Objs.
Animation control parameters (animation_params_json) should be given for all .animate() function.
Eg:
					{
						from       : { x : 100},
						to         : { x : 200},
						anim       : "Location.bounce.easeout.return",
						duration   : 2000,
						repeat     : 5,
						oncomplete : function() { },
						onframe    : function() {}
					}

Parameters
NameTypeDescription
animation_params_jsonJSONA collection of all input parameters to control the animation. All the allowed parameters are explained below

Allowed values for animation_params_json
Following are the allowed values in animation control
NameTypeDescription
fromOptionalIt denotes start frame of an animation. If not provided, current value is used for start. It takes values diffently for every animation type
Animation TypeExample
Location (uses pos)from : { x : 100}, from : { x : 100, y : 50}, from : { x : "+100"}
Dimension (uses dim)from : { wid : 100}, from : { wid : 100, ht : 50}, from : { wid : "+100"}
Colorfrom : "#FFF", from : "#FFFFFF", from : [125,125,125] (RGB)
CSS (Numeric)from : 10 from : 0.1
toMandatoryIt denotes target /final frame of an animation. It must be provided. It takes values diffently for every animation type
Animation TypeExample
Location (uses pos)to : { x : 100}, to : { x : 100, y : 50}, to : { x : "+100"}
Dimension (uses dim)to : { wid : 100}, to : { wid : 100, ht : 50}, to : { wid : "+100"}
Colorto : "#FFF", to : "#FFFFFF", to : [125,125,125] (RGB)
CSS (Numeric)to : 10 to : 0.1
animMandatoryA string which tells animation type, path, easing and return separated by "."
							// format
							anim : "ANIMATION_TYPE . PATH"
							anim : "ANIMATION_TYPE . PATH [. EASING]"
							anim : "ANIMATION_TYPE . PATH [. RETURN]"
							anim : "ANIMATION_TYPE . PATH [. EASING] [. RETURN]"
							
							// Eg
							anim : "Location.grow.easeout.return"
							
							// return --> will reset the animation back to 'from' status
							// path and easing are explained separately
						
propMandatory for (Color and CSS)Style name which must be provided for Color and CSS types of animation.
Eg: prop : "background-color", prop : "opacity"
durationMandatoryDuration in milli seconds
absoluteOptional (Location)An optional parameter for Location type Animation. setting absoulte : true, will force the animation to use "posAbs()" function for changing the position. By default, Location animation uses "pos()"
repeatOptionalA number represents how many times the animation has to be repeated. Setting this to "-1" will make the animation repeat of infinity times
oncompleteOptionalA callback function once the animation is completed
onframeOptionalA function which can be used to do some operations for every frame of the animation

Returns
TypeDescription
Animation ID - NumberReturns animation ID which can be used for future reference.

Methods to Stop animation on $.Animator
MethodDescription
stopAllAnimation()Will stop all currently running animation
							// stop all animation
							$.Animator.stopAllAnimation();
stop( animation_id )Will stop only the animation related to ID specified (animation ID is returned by animate() function)
							// stop animation with id 1
							$.Animator.stop(1);
stopRepeat( animation_id )Will complete the current running sequence of animation and stops further repeating the animation which is specified by animation_id
							// stop repeating animation with id 1
							$.Animator.stopRepeat(1);

Example 1 - A Simple Animation
JS HTML CSS
		$.domLoaded(function() {
		
			$.get("#ani").on("click", function() {
			
				// animate x to 200 in 1 sec
				$.get("#box").animate({
					to : { x : 200 },
					anim : "Location.smooth",
					duration : 1000
				});
				
			});
		});							
						
<body>
	
	<div id="box"></div>
	
	<br/>
	
	<input type="button" id="ani" value="Animate" /> 
	
</body>
	#box {
		background-color : yellowgreen;
		width : 50px;
		height : 50px;
	}					
						
Result

Example 2 - return to the 'from' (start) position
JS HTML CSS
		$.domLoaded(function() {
		
			$.get("#ani").on("click", function() {
			
				//return to the from state
				$.get("#box").animate({
					to : { x : 200 },
					anim : "Location.smooth.return",
					duration : 2000
				});
			});		

		});	
<body>
	
	<div id="box"></div>
	
	<br/>
	
	<input type="button" id="ani" value="Animate" /> 
	
</body>
	#box {
		background-color : yellowgreen;
		width : 50px;
		height : 50px;
	}					
						
Result

Example 3 - Repeat animation for 'n' number of times
JS HTML CSS
			$.domLoaded(function() {
		
			$.get("#ani").on("click", function() {
			
				// repeat animation 3 times
				$.get("#box").animate({
					to : { x : 200 },
					anim : "Location.smooth.return",
					repeat : 3,
					duration : 2000
				});
			});
				

		});		
<body>
	
	<div id="box"></div>
	
	<br/>
	
	<input type="button" id="ani" value="Animate" /> 
	
</body>
	#box {
		background-color : yellowgreen;
		width : 50px;
		height : 50px;
	}					
						
Result

Example 4 - Repeat animation for 'infinity'
JS HTML CSS
		$.domLoaded(function() {
		
			$.get("#ani").on("click", function() {
			
				// repeat animation 3 times
				$.get("#box").animate({
					to : { x : 200 },
					anim : "Location.smooth.return",
					repeat : -1,
					duration : 2000
				});
			});		

		});	
<body>
	
	<div id="box"></div>
	
	<br/>
	
	<input type="button" id="ani" value="Animate" /> 
	
</body>
	#box {
		background-color : yellowgreen;
		width : 50px;
		height : 50px;
	}					
						
Result

Example 5 - Stop all animations
JS HTML CSS
			$.domLoaded(function() {
		
			$.get("#ani").on("click", function() {
				$.get("#box1").animate({
					to : { x : 200 },
					anim : "Location.smooth.return",
					repeat : -1,
					duration : 2000
				});
				
				$.get("#box2").animate({
					to : { x : 400 },
					anim : "Location.smooth.return",
					repeat : -1,
					duration : 5000
				});				
			});
			
			$.get("#stpall").on("click", function() {
				//Stop currently executing animations
				$.Animator.stopAllAnimation();
			});		

		});	;	
<body>
	
	<div id="box1"></div>
	<div id="box2"></div>
	
	<br/>
	<input type="button" id="ani" value="Animate" /> 
	<input type="button" id="stpall" value="Stop All Animation" /> 
	
</body>
	div {
		margin : 10px;
	}
	
	#box1 {
		background-color : yellowgreen;
		width : 50px;
		height : 50px;
	}
	
	#box2 {
		background-color : #faa;
		width : 70px;
		height : 70px;
	}				
						
Result

Example 6 - Stop a specific animation using animation ID
JS HTML CSS
			$.domLoaded(function() {
												
			var an1, an2;
			$.get("#ani").on("click", function() {
				an1 = $.get("#box1").animate({
					to : { x : 200 },
					anim : "Location.smooth.return",
					repeat : -1,
					duration : 2000
				});
				
				an2 = $.get("#box2").animate({
					to : { x : 400 },
					anim : "Location.smooth.return",
					repeat : -1,
					duration : 5000
				});				
			});
			
			$.get("#stpall").on("click", function() {
				//Stop only the specified animation
				$.Animator.stop(an1);
			});		

		});	;	
<body>
	
	<div id="box1"></div>
	<div id="box2"></div>
	
	<br/>
	<input type="button" id="ani" value="Animate" /> 
	<input type="button" id="stpall" value="Stop All Animation" /> 
	
</body>
	div {
		margin : 10px;
	}
	
	#box1 {
		background-color : yellowgreen;
		width : 50px;
		height : 50px;
	}
	
	#box2 {
		background-color : #faa;
		width : 70px;
		height : 70px;
	}				
						
Result

Example 7 - Stop the repetition of a specidied animation using animation_id
JS HTML CSS
			$.domLoaded(function() {
		
			var an1, an2;
			$.get("#ani").on("click", function() {
				an1 = $.get("#box1").animate({
					to : { x : 200 },
					anim : "Location.smooth.return",
					repeat : -1,
					duration : 2000
				});
				
				an2 = $.get("#box2").animate({
					to : { x : 400 },
					anim : "Location.smooth.return",
					repeat : -1,
					duration : 5000
				});				
			});
			
			$.get("#stpall").on("click", function() {
				//Stop repetition of an animation
				$.Animator.stopRepeat(an1);
			});		

		});	;	
<body>
	
	<div id="box1"></div>
	<div id="box2"></div>
	
	<br/>
	<input type="button" id="ani" value="Animate" /> 
	<input type="button" id="stpall" value="Stop All Animation" /> 
	
</body>
	div {
		margin : 10px;
	}
	
	#box1 {
		background-color : yellowgreen;
		width : 50px;
		height : 50px;
	}
	
	#box2 {
		background-color : #faa;
		width : 70px;
		height : 70px;
	}				
						
Result

Example 8 - oncomplete callback function
JS HTML CSS
		$.domLoaded(function() {
		
			$.get("#ani").on("click", function() {
			
				// callback function once animation is completed
				$.get("#box").animate({
					to : { x : 200 },
					anim : "Location.smooth",
					duration : 1000,
					oncomplete : function() {
						alert("Animation is completed");
					}
				});
				
			});
		});							
						
<body>
	
	<div id="box"></div>
	
	<br/>
	
	<input type="button" id="ani" value="Animate" /> 
	
</body>
	#box {
		background-color : yellowgreen;
		width : 50px;
		height : 50px;
	}					
						
Result

Example 9 - onframe function which will be called for every frame of the animation
JS HTML CSS
		$.domLoaded(function() {
		
			$.get("#ani").on("click", function() {
			
				// onframe function 
				$.get("#box").animate({
					to : { x : 200 },
					anim : "Location.smooth.return",
					duration : 2000,
					onframe : function() {
						$.get("#msg").html(parseInt($.get("#box").style("left")));
					}
				});
				
			});
		});							
						
<body>
	
	<div id="box"></div>
	
	<br/>
	Left
	<div id="msg"></div>
	
	<br/>
	
	<input type="button" id="ani" value="Animate" /> 
	
</body>
	#box {
		background-color : yellowgreen;
		width : 50px;
		height : 50px;
	}					
						
Result