Write Hype is the personal weblog of web designer/developer Josh Minnich, featuring articles about life, events, and happenings.

Jul 1

Simple jQuery Animations

JavaScript is gaining popularity all over the web these days, perhaps JavaScript libraries like jQuery, Prototype, and MooTools ring a bell? If not, this article is here to help you understand what a JavaScript library is, and some of the things they can be used for.

For this article I’ll be using jQuery. So if you’d like to try some of these tutorials yourself, you’ll need to visit the jQuery download page and link it to your demo html page.

First lets get our HTML page set up so we can have some fun. For this tutorial I’m going to make a basic HTML page with the CSS embedded and the JavaScript linked to the page. Here’s what my HTML page looks like.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="en-us" />
    <!-- Page Title -->
    <title>Simple jQuery Animations</title>
    <!-- CSS -->
    <style type="text/css" media="screen">
        /* Basics */
        body {
            font-family:Georgia,Times,serif;
            margin:1em;
            padding:0 0 0;
        }
        h1, h2 { font-weight:normal; }
        p a { font-style:italic; }
        a {
            color:blue;
            cursor:pointer; /* Normal link cursor */
        }
        a:hover { color:purple; }
        /* Holders */
        div {
            border:1px dashed #999;
            margin:0 0 1em;
            padding:1em;
        }
        p.basictext, p.fadetext, p.slidetext {
            background:green;
            color:white;
        }
    </style>
    
    <!-- JavaScript -->
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="global.js"></script>
</head>
<body>
    <h1><em>Simple jQuery Animations</em></h1>
    <div class="basics">
        <h3>Basic Effects</h3>
        <p><a id="basicshow">Basic Show</a> : <a id="basichide">Basic Hide</a> : <a id="togglebasic">Toggle Basic</a></p>
        <p class="basictext" style="display:none;">This text should show and hide according to the link you selected.</p>
    </div>
    <div class="fades">
        <h3>Fading Effects</h3>
        <p><a id="fadein">Fade In</a> : <a id="fadeout">Fade Out</a></p>
        <p class="fadetext" style="display:none;">This text should fade according to the link you selected.</p>
    </div>
    <div class="slides">
        <h3>Slide Effects</h3>
        <p><a id="slidedown">Slide Down</a> : <a id="slideup">Slide Up</a> : <a id="toggleslide">Toggle Slide</a></p>
        <p class="slidetext" style="display:none;">This text should slide according to the link that you selected.</p>
    </div>
</body>
</html>

You may have noticed a couple of things on the HTML page that I prefer to do. 1.) I like the ‘action buttons’ aka the links that trigger events to be id’s and 2.) the objects being animated, to be classes. If your using the jQuery framework this is not a ‘must’ at all. Its all your preference. There have been times when I’ve had my ‘action buttons’ classes because I had to use them for multiple things on the page. It may seem a little confusing at first, but you’ll catch on to it the more you use it and experiment. The best way to think about it, is the same way you do with CSS; id’s are used for containers or high priority tags, and classes are used multiple times. See the relation?

Now that the HTML page is set up, we can type up our JavaScript that will power the animations. Since we are using jQuery as our JavaScript library we’re going to use the jQuery API to check the page on load and use unobtrusive JavaScript.

$(document).ready(function()
{
    // Basics
    $('#basicshow').click(function()
    {
        $('.basictext').show();
    });
    $('#basichide').click(function()
    {
        $('.basictext').hide();
    });
    $('#togglebasic').click(function()
    {
        $('.basictext').toggle();
    });
    // Fades
    $('#fadein').click(function()
    {
        $('.fadetext').fadeIn();
    });
    $('#fadeout').click(function()
    {
        $('.fadetext').fadeOut();
    });
    // Slides
    $('#slidedown').click(function()
    {
        $('.slidetext').slideDown();
    });
    $('#slideup').click(function(){
        $('.slidetext').slideUp();
    });
    $('#toggleslide').click(function()
    {
        $('.slidetext').slideToggle();
    });
});

If your a little confused how the JavaScript is working, let me break it down a little for you. First of all, we have our powerful $ selector that allows use to basically say, select this object on the page. Secondly we have our action or event we’re listening to on that object, $().click(). Finally we have our function that we are attaching the event of the object we are clicking on, $().click(finction(){ do something; }).

See how easy it is with jQuery on your side? If you liked this tutorial and want the original copy I worked with, you can downloaded it here.

Search Articles
Articles by Tag
About the Author

Articles featured on Write Hype are written by Chicago based web designer/developer Josh Minnich. I’m currently accepting freelance work for the summer and fall. Please visit my portfolio page, or contact me for more information!