JQuery Part 2 – Basic Animation
Welcome to JQuery part 2, using basic animation techniques. You should already have a basic understanding of JQuery and it’s elements to complete this tutorial. If you don’t, please refer to my JQuery Introduction post found here. Now to get started…
Let’s start by creating a basic HTML page and call it index.html in the root of our web servers directory and add a basic page structure to that file. Let’s also make sure that we have the JQuery libraries imported and ready to use.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>JQuery Animations</title> <script type="text/javascript" src="lib/jquery.js" /> </head> <body> </body> </html>
Now, in order to complete animation we will need to display an element to animate. The easiest way to do this is to use some basic CSS. So for the purpose of this tutorial let’s create a style.css file and put it in the root of our directory. Let’s then link it to our index.html file so that we can use it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>JQuery Animations</title> <script type="text/javascript" src="lib/jquery.js" /> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> </body> </html>
Now that we have our CSS file linked to our HTML we’re going to need to add an element to animate. For this demonstration we’re just going to use a red box that’s 100px by 100px inside a div. Let’s add that to our CSS file.
#redBox
{
width:100px;
height:100px;
background-color: red;
}Now we’ll add the appropriate div tags to our HTML file so that our red box shows up. We’re also going to add an anchor tag directly below our red box to toggle the box between showing and disappearing.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>JQuery Animations</title> <script type="text/javascript" src="lib/jquery.js" /> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <div id="redBox"></div> <a href="#">Show/Hide</a> </body> </html>
Now we’re all ready to start coding our JQuery. If you run the HTML file right now you should see a red box sitting at the top left hand corner of the page. Right now the red box shouldn’t do anything as we haven’t coded the JQuery. So let’s start out by using the document ready function. and adding a function to all of our anchor tags.
<script> $(document).ready(function(){ $('a').click(function({ )); }); </script>
Now we’re ready to be using some of the animation methods found in the JQuery library. First, since the box is by default showing up in the browser we’re going to make it hide by using the .hide() function. The .hide() function can be used without any parameters being passed or you can pass a speed and an optional callback(). The callback is a function to be executed when the animation has been completed. For the sake of this tutorial we’re only going to cover the speed parameter.
<script> $(document).ready(function(){ $('a').click(function({ $('#redBox').hide('slow'); )); }); </script>
Now, if you include the script section in the header of your index.html document and run it, when you click the anchor tag you should see the red box that we created disappear. However now the red box is gone and we can’t get it back. We’re going to need to change this so that we can get it back by clicking on the anchor tag again. In order to get this we’re going to need to add another function and pass it as a parameter to our .click() function for our anchor tags.
<script> $(document).ready(function(){ $('a').click(function({ $('#redBox').hide('slow'); },function(){ $('#redBox').show('slow'); }); }); </script>
Since we’re adding the new function as another parameter to the click function, we need to terminate the current function before starting the new one. This is why we need to close the curly braces from the previous function before we start another. If we didn’t close the curly braces and just put it inside the first function then every time we clicked on the anchor tag, it would disappear and then show again without pressing the anchor tag. Now when we put that all together and run it, whenever we click the anchor tag the box should disappear and then re-appear when we click it again. Here is the complete code.
<html> <head> <title>JQuery Animations</title> <script type="text/javascript" src="lib/jquery.js" /> <link rel="stylesheet" href="style.css" type="text/css" /> <script> $(document).ready(function(){ $('a').click(function({ $('#redBox').hide('slow'); },function(){ $('#redBox').show('slow'); }); }); </script> </head> <body> <div id="redBox"></div> <a href="#">Show/Hide</a> </body> </html>
In the tutorial I just used 2 of the more basic animation functions in the JQuery library. For a full reference to the JQuery animation API, please check out http://docs.jquery.com/Effects/. Stay tuned for JQuery part 3 
.