Day 3:HTML5 Animation using JQuery

JQuery is a free open source JavaScript library created to simplify the process of scripting HTML and JavaScript. It specializes in accessing, adding, modifying and removing elements on your page, creating AJAX requests and creating interactive animations.

You need to include the source path to the library in your html so you first need to decide whether or not you want to host the library on your server or point to it on a content delivery network (CDN), like google. The advantage to using something like Google is that it will point the user to the closest server.

Lets put the script src inside our head tags

  1. <head>
  2. <meta charset="UTF-8">
  3. <title>JQuery Basic Setup</title>
  4. <script src="jquery-1.7.2.min.js"></script>
  5. </head>


Don’t fear the $

The $ denotes a JQuery constructor. it can be written either using the $() or JQuery(). All JQuery constructors must start with this. the selector is enclosed in the parens and it can be an element ID or class name. Similar to the way CSS works.

Lets start with something simple like make a link to a URL and specify that an alert be fired off every time a link is clicked. You can see a sample here

First lets get into our body tag and create a link.

  1. <a href="http://jquery.com/">jQuery Website</a>

so far pretty easy. Now lets set the link to perform a function when clicked.

Just like JavaScript, you want to execute your jQuery after the HTML has been completely loaded. We’ll use the $(document).ready(function() { } to do this.

Then inside this function we can add our function to show an alert when we click any link.

  1. $("a").click(function(event){
  2.    alert("Thanks for visiting!");
  3.   });

Any link in our document now will have fire this function on click.

HTML

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Demo</title>
  6. <script src="jquery-1.7.2.min.js"></script>
  7. </head>
  8.  
  9. <body>
  10. <a href="http://jquery.com/">jQuery Website</a>
  11.  
  12. <script>
  13.   $(document).ready(function() {
  14.         //reserved todo
  15.   $("a").click(function(event){
  16.    alert("Thanks for visiting!");
  17.   });
  18.     });
  19. </script>
  20. </body>
  21. </html>

Above on line 6 you see the completed example we’re pointing to our local minified copy of JQuery on our server right next to the index.html file.

On line 10 We’re setting up a simple link to the JQuery site.

On Line 13 we’re calling an anonymous function when the document is ready
On Line 15 we access any anchor tags and attach a listener for click where we’ll fire another anonymous function to call an alert.

And thats it! Well you are probably saying, “that’s great but where is the animation? Where is the interactivity?”

Click a link to animate a box
In the next example we’ll do a little interactive animation where we click a link and a box fades out. You can see the sample here.

HTML

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Demo</title>
  6. <script src="jquery-1.7.2.min.js"></script>
  7. <link href="css/style.css" rel="stylesheet" type="text/css" />
  8. <script>
  9.  $(document).ready(function() {
  10.   $('a').click(function() {
  11.    $('#box').fadeOut('fast');
  12.   });
  13.  });
  14.  
  15. </script>
  16. </head>
  17.  
  18. <body>
  19. <div id="box"></div>
  20. <a href="#">click</a>
  21. </body>
  22. </html>

In the code above everything is similar except as you can see we have added a separate css file which we link to in the header

HTML

  1. <link href="css/style.css" rel="stylesheet" type="text/css" />

Lets take a quick look at the CSS

CSS

  1. @charset "UTF-8";
  2. /* CSS Document */
  3.  
  4. body {
  5.  background:#555;
  6. }
  7. #box {
  8.  background:#F00;
  9.  width: 600px;
  10.  height: 400px;
  11. }

Nothing fancy here, we’re just going to define the box using #box {}
inside we’re going to set its background color, width and height.

Back in the HTML (above) you’ll see that we’ve created a div with the ID ‘box’ on line 19 inside the body tags. Under that we’ve simply made a anchor tag link to nowhere ‘#’.

Lets review the (above) HTML code
on line 9 we’re using our $(document).ready(function() {}); that we used in the last example to ensure that our JQuery isn’t running until all the items in the page are loaded (key to using images and getting image widths).

Line 10 should also look familiar as we are accessing our a tags using JQuery and putting a .click listener on it and running an anonymous function

Line 11 is what happens when the anonymous function is fired. In this case we are targeting anything with the #box ID and we are going to fade Out ‘fast’. We could also use a specific amount of time in Miliseconds (6000 for 6 seconds), in which case we wouldn’t use the quotes.

$('#box').fadeOut('fast');
$('#box').fadeOut(6000);

You may also notice that the fadeOut function in JQuery takes 2 other params, and they are easing and a callback. The callback is what you want to call when the fadeOut is complete. A great way to chain functions together. We won’t be utilizing that feature at this moment.

If you run the code you will see that when you click the link, the box fades out.

JQuery is a really powerful JS lib that can help with the simplification of your JS programming with HTML5 pages. It contains a few built in methods to make some nifty transitions and animations but as you can see its meant to be a stand alone animation tool.

The next logical step would be to build some sort of interface with JQuery but that is out of the scope of this tutorial series 5 HTML5 Animations in 5 Days. Perhaps we’ll revisit JQuery in later tutorials to show you how to make a slide show or something.

Posted on July 9, 2012 at 12:06 pm by Runtime · Permalink
In: HTML5, JQuery, Tutorial, animation

Leave a Reply

You must be logged in to post a comment.