Create animation effects using jQuery Animate Function

jQuery Animate is a simple jQuery function to Perform a custom animation of a set of CSS properties. This jQuery Animate function accepts four arguments first one is CSS Properties and second argument is duration of the animation, third argument is easing effect to apply and the last argument is a callback function to call after finishing the animation. Here is the syntax and complete code to use jQuery Animate function.

Syntax of jQuery Animate function

.animate( {css-properties} , duration , easing , complete )

First argument in jQuery animate function is css-properties to css rules, these css rules should be added in curly braces. It’s required argument.

Second argument is duration, if you want to animate it for 2 seconds then use 2000 as value. Duration is optional argument.

Third argument is easing, and possible values for easing is linear, swing. Swing is default value, easing argument is optional.

Fourth argument is callback function, after completing animation you can execute other function like adding an alert message. It’s optional argument.

Here I’m using this simple html code, it’s an html5 document. If you want to know more HTML5 doctype declaration read this. If you want to know Read this – How to create HTML Document in Dreamweaver.

In head section added a link to latest jQuery file from jquery.com server.

In body section added three link with some id’s, after clicking on each links it executes some jquery code to make animations. Next created a div with class of show, and added some embedded styles. In embedded styles just defining height, width and background colour.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<title>JQuery Animation effects</title>

<style>
	.show{
		height:400px;
		width:400px;
		background:#3CF;
		}
</style>
</head>

<body>
<a href="#" id="animate1">Animate 1</a>
<a href="#" id="animate2">Animate 2</a>
<a href="#" id="animate3">Animate 3</a>

<div class="show">
	<p>Simple paragraph text.</p>
</div>
</body>
</html>

For creating our first animation using jQuery animate function, add this code right after jQuery file in head section.

Here I’m passing two arguments, first argument of CSS styles just added only one css rule that is increasing width to 500 pixels. And as third argument duration passing one second to complete animation.

This code will be executed after clicking on the first HTML link which has id of animate1.

<script>
$("document").ready(function(){
	$( "#animate1" ).click(function() {
	  $(".show").animate({width: "500px"}, 1000);
	});
	
});
</script>

Here this code will be executed after clicking on second HTML link which has an id of animate2.

After that it will animate to increase font size upto 30 pixels in two seconds of time.

<script>
$("document").ready(function(){
	$( "#animate2" ).click(function() {
	  $(".show").animate({fontSize: "30px"}, 2000);
	});
	
});
</script>

Adding multiple CSS styles

Previously I’m adding one single CSS rule, but we can add extra CSS rules like two, three or even more CSS rules. This is an example for that condition

If you click on third HTML link, which has id of animate3. Then this code will be executed.

And duration for animation is 5 seconds, and easing mode is linear. After completing animation added a function to show an alert message. This is an example to use callback function, you can do any other things with this one.

<script>
$("document").ready(function(){
	$( "#animate3" ).click(function() {
	  $(".show").animate({ width: "500px", fontSize: "30px", opacity: "toggle" }, 5000, "linear", function(){
	  alert("animation finished");
	  });
	});
});
</script>

Vivek Vengala
 

Vivek Vengala is a Online Entrepreneur, Web Developer from Hyderabad India.

Click Here to Leave a Comment Below 0 comments

Leave a Reply:

x

Join My Facebook Group to Receive Coding Tutorial for Free

email-subsribe