Common Animation Parameters

Installation

CSS Selectors

$.get() Nedil Objects ($.Objs) General Selectors Attribute Selectors Child Selectors Sibling Selectors

Event Handling

on() off() trigger() $.self() $.currentEvent Events

DOM Manipulation

Common - Two ways of Usage addChild() addParent() wrapChildren() removeChild() getChildren() isChild() isParent() nextSibling() previousSibling() isSibling() childIndex()

Utilities

forEach() html() text() pos() posAbs() dim() mouse() mouseAbs() style() css() hasCSSClass() selection() convertHexRGB() cloneJSON()

Data Structures

Stack Queue Table

AJAX APIs

AJAX Request load() ajaxSubmit() toJSON()

Animation APIs

Animation Parameters Location Animation Dimension Animation Color Animation CSS Animation Paths and Easing

Widgets Creation

How to create a widget ? About Default Widgets

.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

Name	Type	Description
animation_params_json	JSON	A 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

Name

Type

Description

from

Optional

It denotes start frame of an animation. If not provided, current value is used for start. It takes values diffently for every animation type

Animation Type	Example
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"}
Color	from : "#FFF", from : "#FFFFFF", from : [125,125,125] (RGB)
CSS (Numeric)	from : 10 from : 0.1

Mandatory

It denotes target /final frame of an animation. It must be provided. It takes values diffently for every animation type

Animation Type	Example
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"}
Color	to : "#FFF", to : "#FFFFFF", to : [125,125,125] (RGB)
CSS (Numeric)	to : 10 to : 0.1

anim

Mandatory

A 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

prop

Mandatory for (Color and CSS)

Style name which must be provided for Color and CSS types of animation.
Eg: prop : "background-color", prop : "opacity"

duration

Mandatory

Duration in milli seconds

absolute

Optional (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()"

repeat

Optional

A number represents how many times the animation has to be repeated. Setting this to "-1" will make the animation repeat of infinity times

oncomplete

Optional

A callback function once the animation is completed

onframe

Optional

A function which can be used to do some operations for every frame of the animation

Returns

Type	Description
Animation ID - Number	Returns animation ID which can be used for future reference.

Methods to Stop animation on $.Animator

Method	Description
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

JSHTMLCSS
								$.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

JSHTMLCSS
								$.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

JSHTMLCSS
									$.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'

JSHTMLCSS
								$.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

JSHTMLCSS
									$.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

JSHTMLCSS
									$.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

JSHTMLCSS
									$.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

JSHTMLCSS
								$.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

JSHTMLCSS
								$.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