JQuery Animation Explained

by Bhumi // Nov 13,2012 // No comment

jQuery is a JavaScript framework which intends to easily develope interactive web sites and user interfaces with a few lines of code.jQuery animate is quite common and useful function to add animation functionality.

Let’s start from SYNTAX


.animate( properties, [ duration ], [ easing ], [ callback ] )

1 2	.animate( properties, [ duration ], [ easing ], [ callback ] )

Parameters in this function,properties parameter is mandatory and others are semi-optional which means you can use it as per your requirement.

Let’s learn the animate() function with set of examples.

Step 1:

First of all,include the jQuery javascript library in < HEAD > tag of your file:


<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"
></script>

src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"

></script>

Here, I have included latest version of jQuery core library.

Step 2:

Now, let’s place HTML code.I have developed a demo so you can easily understand the code.Place HTML code into the < BODY > tag.


<input type="button" value="<<" id="btnLeft" />
<input type="button" value=">>" id="btnRight" />
<input type="button" value="/\" id="btnUp" />
<input type="button" value="\/" id="btnDown" />
<a href="#" id="link-fade">Fade</a>
<a href="#" id="cross">cross</a>
<div id="box"></div>

<input type="button" value=">>" id="btnRight" />

<a href="#" id="cross">cross</a>

Here, we are using a sample DIV tag with id box for animating.

Step 3:

Next is important part, jQuery animate code and let me explain it one by one.


(function ($) {
    // code here
});

(function ($) {

// code here

});

passing jQuery into anonymus functions that means it gives guarantee that $ will work for jQuery.

Next, Let’s see the code for Left animation of box.


$(function(){
	var leftPos = 0;
	var topPos = 0;
$("#btnLeft").click(function(){
		leftPos = leftPos - 100;
		$("#box").animate({	left: leftPos + 'px'	}, 1000);
	});
});

$(function(){

var leftPos = 0;

var topPos = 0;

$("#btnLeft").click(function(){

leftPos = leftPos - 100;

$("#box").animate({ left: leftPos + 'px' }, 1000);

});

Above code will animate the box into the left direction.you can use same code for right direction by placing + rather than -.


leftPos = leftPos + 100;

1 2	leftPos = leftPos + 100;

Next, is about the top and bottom animation of box which is same like the above but just the variable and parameter is different.


$("#btnUp").click(function(){
		topPos = topPos - 100;
		$("#box").animate({
			top: topPos + 'px'
		}, 1000);
	});
$("#btnDown").click(function(){
		topPos = topPos + 100;
		$("#box").animate({
			top: topPos + 'px'
		}, 1000);
	});

$("#btnUp").click(function(){

topPos = topPos - 100;

$("#box").animate({

top: topPos + 'px'

}, 1000);

});

$("#btnDown").click(function(){

topPos = topPos + 100;

$("#box").animate({

top: topPos + 'px'

}, 1000);

});

We can use animate function for the effect also. so let’s see some more effect with animate function like fade and cross.

FADE:


$("#link-fade").click(function(){
		$("#box").animate({
			opacity: 0
		}, 1000);
	});

$("#link-fade").click(function(){

$("#box").animate({

opacity: 0

}, 1000);

});

For fade effect with animate function in jQuery, you need to place opacity into it.

CROSS:


$("#cross").click(function(){
		topPos = topPos + 100;
		leftPos = leftPos + 100;
		$("#box").animate({
			top: topPos + 'px',
			left: leftPos + 'px'
		}, 1000);
	});

$("#cross").click(function(){

topPos = topPos + 100;

leftPos = leftPos + 100;

$("#box").animate({

top: topPos + 'px',

left: leftPos + 'px'

}, 1000);

});

For cross move effect with animate function in jQuery, you need to place both leftPos and topPos into it.

DEMO

View Demo

Thanks for reading and feel free to share your thoughts, don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.

jQuery Shake Effect Explained

Recently someone asked me that, I want that vibrate effect which you can see in some site as advertisement. In some site, advertisement comes with READ MORE

Solution:Uncaught ReferenceError $ is not defined in WordPress

As you all know, new version of WordPress (3.5) includes its own version of jquery, which has been rigorously tested with WP and many of READ MORE

To read JSON data with jQuery

In this short and informative post, I am going to explain how to parse the JSON string using jQuery. JSON stands for a JavaScript Object READ MORE

jQuery Cookie Explained

jQuery provides a plugin which you can use with the jQuery library itself and you can easily store and access cookies. Before we begin, lets READ MORE