Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to create animations in JQuery

In this lesson we will learn how we can create animation using jQuery

Animation gives life to any web page and one of the exciting features of the jQuery is the ability to create custom animation. In this lesson we will learn how we can give life our web pages using jQuery. jQuery allows you to create simple Effects like hiding and showing any div or more complex one like fading or moving a div from one location to another.

For starting the lesson let’s first start I with the resources that is require. Firstly we require the jQuery source file (you can download the source file from the jQuery site http://www.jquery.com, next we create a html file and a css file. Now, the structure looks like this:

  • Index.html
  • css/style.css
  • js/jquery-1.9.0.js
jQuery Animations

First, we will learn how to hide and show any component:

1. hide(), show() and toggle(): These functions are used to show, hide or toggle any html component to do the we create a some divs the code of the index.html page is shown below:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<link type="text/css" href="css/style.css" rel="stylesheet"/>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Jquery Test File</title>
</head>
<body>
<div id="display">
This Div will Show and Hide
</div>
<input type="button" name="btnHide" id="btnHide" value="Hide" style="width:100px; height:30px;"/>
<input type="button" name="btnShow" id="btnShow" value="Show" style="width:100px; height:30px;"/>
</body>
</html>

And the code for CSS page is given below:

@CHARSET "ISO-8859-1";

*{
	margin: 0px;
	padding: 0px;
}

body{
	background-color: lightblue;
}

#display{
	width:400px;
	height:400px;
	background-color:blue;
	border:thin solid black
}

Now to start with the animation we add the following code to head of the index.html page:

<script language="javascript">
$(document).ready(function(){
	$("#btnShow").click(function(){
		$("#display").show();
	});

	$("#btnHide").click(function(){
		$("#display").hide();
	});
});
</script>

What we have done here is that we have created attached an event hander whenever user click on the any of these button. When the clicks on the button with id btnHide. We had called a show() function of Jquery class which hides the component with id display. Similarly when ever user clicks on the show button the div becomes visible again. The problem with this approach are two firstly, There is no effect on the component if we click on btnShow and it is already visible and vice-versa, secondly, we need to create two different component and for an div visible and invisible whereas on a system like toggle menu we need to this through a single div or button. This is where toggle comes to rescue. So, here is the code to the same effect using a single button and single function.

<script language="javascript">
$(document).ready(function(){
	$("#btnHide").click(function(){
		$("#display").toggle();
	});
});
</script>

2. Controlling the Speed: Although the system is working fine but it isn’t giving the effects that is expected from a Jquery animation. This is because we aren’t controlling the speed of the animation. To control the speed of an animation we can pass an integer parameter in the function. This value is the duration of animation in milliseconds. For example $(“#display”).toggle(800); . Now the animation will take .8 seconds to complete. It also gives an smooth effect to the animation. Alternatively you pass three names fast(approx. 200ms), medium(approx 400ms) and slow(approx 600ms). Here is the example code.

<script language="javascript">
$(document).ready(function(){
	$("#btnHide").click(function(){
		$("#display").toggle("slow");
	});
});
</script>

3. fadeIn(), fadeOut() and fadeTo() :- The hide function remove the component for the layout by setting its width and height to 0 and its display property to none. In contrast the fadeOut function make it transparent by setting it opacity value to 0. Here is code to show or hide an element using fadeIn and fadeOut functions.

<script language="javascript">
$(document).ready(function(){
	$("#btnHide").click(function(){
		$("#display").fadeOut();
	});
	
	$("#btnShow").click(function(){
		$("#display").fadeIn();
	});
});
</script>

You can also control the speed of fadeIn and fadeOut by passing parameter just like show, hide and toggle functions. But, if you do not to make the element completely disappear from the div then you can use the fadeTo function. The fadeTo function takes three parameters first duration, second intended opacity and third callback function(that we will learn in advance animation techniques using Jquery). Here is an example of fadeTo function which reduces the opacity to 50%.

<script language="javascript">
$(document).ready(function(){
	$("#btnHide").click(function(){
		$("#display").fadeTo(1000, 0.5);
	});
	
	$("#btnShow").click(function(){
		$("#display").fadeTo(1000, 1.0);
	});
});
</script>

4. slideUp(), slideDown() and slideToggle():-slideDown() allows the div to increase the height of an element to its intended height, whereas the Slide reduces its height to 0 and make it disappear from the page. Here is an example:

<script language="javascript">
$(document).ready(function(){
	$("#btnHide").click(function(){
		$("#display").slideUp();
	});
	
	$("#btnShow").click(function(){
		$("#display").slideDown();
	});
});
</script>

But if you feel that this is happening a bit quicker. Then, you can control its speed by passing int parameter to the call which is the duration in milliseconds(ms), the example is given below:

<script language="javascript">
$(document).ready(function(){
	$("#btnHide").click(function(){
		$("#display").slideUp(800);
	});
	
	$("#btnShow").click(function(){
		$("#display").slideDown(800);
	});
});
</script>

Here again, for controlling the visibility of the element we are using two control buttons. Which is not suitable for work where it has main application like drop down application. So, to control it using a single controller we use slideToggle() function. Here is the code:

<script language="javascript">
$(document).ready(function(){
	$("#btnHide").click(function(){
		$("#display").slideToggle(800);
	});
});
</script>

This is all for today. See you next time!



I am well versed with Computer Programming languages and possess good working knowledge on software languages such as C, Java, PHP, HTML and CSS

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login