Using jQuery is a way to have elements on your page move or perform other animation effects. You can have things move just as the visitor lands on the page or you can have the animations start with an event such as a click or a mouse over.

This tutorial will use the jQuery API .click(), .html().animate() and .delay() methods.






Create a new document: tutorial-4.html

We will start out with the basic jQuery document that was created in Tutorial 1.

Open up the document called jquery-blank.html in a text editor and do a "Save As" into the same directory. Save the document as  tutorial-4.html.

You will need to download the images for the animation from the links to the right.

Place the image files in the images folder with your tutorial files.

Create the HTML elements

Inside of the <body>...</body> tags we are going to create a container element, a box for the visitor to click, and the images for the balloons.

Type the following into your open document:

<div id="container">
    <h4 id="releaseballoons"></h4>
    <img id="balloonred" src="/images/balloonred.png" alt="Red Balloon" />
    <img id="balloongreen" src="/images/balloongreen.png" alt="Green Balloon" />
    <img id="balloonblue" src="/images/balloonblue.png" alt="Blue Balloon" />

Style the HTML element

Let's add some styling to create the container to hold it all, the box for the visitor to click and then place the balloons out of sight. Above the closing </head> tag, you will see the <style type="text/css">...</style> section. Add the following:

<style type="text/css">
    #container {width: 400px; height: 400px; margin: 0 auto;
    background: linear-gradient(0deg, #ffffff, #A3BEEE);
    overflow: hidden;position: relative;box-shadow: inset 0 0 25px #A3BEEE}
    #releaseballoons{padding: 15px; border-radius: 20px;color: #fff;
    background: #0077dd; text-align: center; margin: 60px auto;
    width: 200px;cursor: pointer;}
    #releaseballoons:hover {background: #0055ff;}
    [id^="balloon"] {position: absolute;top: 120%;}
    #balloonred {left: 35px;}
    #balloongreen {left: 185px;}
    #balloonblue {left: 225px;} 

Add the jquery code

Go up to the <script>...</script> section in the <head>...</head> section. This is the section with $(document).ready() function already inserted.

<script type="text/javascript">
        $("#releaseballoons").html("Release the balloons");
    });  // End document.ready()

Let's go thru the script step by step:

$("#releaseballons").html("Release the balloons");

this uses .html() to add text to that element when the browser window is opened or refreshed. It is not part of the .click() function.


this uses the .click() method to set up a function tied to the visitor clicking on the element of id="releaseballoons"


this uses the .html() method to change the html of the element with that id. The change occurs after the click


the .delay(100) keeps the first animation from occurring for 20/1000th (0.2) of a second. The animation is to change the css property to top: -200px. The animation duration is 3000 milleseconds or 3 seconds


this follows the same logic as the prior step, but the delay is set so the blue balloon is released a little later than the red


same logic, only released even a little later with .delay(370) 


this is necessary to close the function of method

Note how you can use several methods together in one line of code.

Test the code

Save the document and open up a new browser window. Type the path to the document in the address bar of the browser. For example:


When you open up the document, you should see something like this.