Starting With jQuery - Effects

This is second post in a string of posts where I chronicle my adventure in learning jQuery from having no previous experience with the framework.  Last week we did a quick crash course with jQuery to show how easy it was to create a fairly simple UI with only a few lines of code.  This week, we're going to play around with some of the visibility effects that it has to offer. Visibility effects are nothing more than ways to show, hide, and fade different elements on your web page.  While this may seem trivial, a quick look at sites such as the BBC and Google's iGoogle web portal provide examples of how being able to toggle visibility of certain parts of the web site can greatly enhance the user experience.

Unlike my previous post in this series, we only will need the primary jQuery.js file.  Once again, we're going to be using jQuery version 1.2.6, and the file can be downloaded here.

In addition to the jQuery.js file, a colleague inquired as to where I learned how to use jQuery and specifically the topic of this post. To be honest, I learned everything that I'm talking about through using jQuery's web site.  The documentation on the site is amazing to say the least and anyone who is interested in learning jQuery, I HIGHLY recommend checking out their site at jQuery.com.  In addition, there are a number of great people talking about jQuery and a quick searching on Live.com or Google yields enough results that can help guide you to answering any question you may find yourself having.  The jQuery documentation that covers what I'm covering in this post can be found here.

Now, for the quick look at the different things we can do with jQuery's effects.  To keep things simple, we're going to focus on basic, sliding, and fading effects.  jQuery allows for more advanced effects to be accomplished; however, I'm just going to keep things simple.

In order to do any of the effects you need 2 things; the jQuery.js file, and a web page with an element you wish to show and/or hide.  Sounds simple enough.

So, let's start with some simple HTML that has a simple <div> we will be playing with and a button to invoke the actions.

   1: <div id="header" style="width:100%; background-color:#800000; height:100px; display:block;">

   2: This area needs to disappear.

   3: </div>

   4: <br />

   5: <input type="button" value="Click Me!" /> 

We're just keeping it simple today.  Now, let's dive into the jQuery.

Basic Effects

The first thing we're going to look at with jQuery's visual effects will be to hide our <div> when we click on the button.  To do this, we simply call the jQuery element's hide() function.

   1: function visibilityHelper()

   2: {

   3:     $("#header").hide();

   4: }

After we add the function call to our button's onClick event handler, we see that the hide() function causes the <div> to be animated by sliding it up, left, and fading it out.  That's pretty cool for such a small amount of code.

In addition, to the default hide() function, the function can also include a parameter to control the speed of the animation.  In the example below, we add the speed and also call the show() function to make the element immediately reappear.

   1: function visibilityHelper()

   2: {

   3:     $("#header").hide("slow");

   4:     $("#header").show("slow");

   5: }

Now that we have seen how to hide and show elements, there are additional things we can do with these functions. Both functions have 2 possible parameters to alter the default behavior however you need. 

The first parameter the functions accept controls the speed of the animation (as shown in the previous code snippet).  This parameter can have 1 of 4 values; "slow", "normal", "fast", or a duration in milliseconds (e.g. 4000 would stretch the animation over 4 seconds).

The second parameter the functions take after speed is the ability to call another function once it has finished.  This callback can be very useful to do cascading animation, looping, or other page manipulations (i.e. AJAX Calls to populate content).

Let's modify our example to illustrate both of these parameters.  In the code below, we're setting the duration of our hide() function to "fast" and adding a call to another function which shows an alert box.

   1: function visibilityHelper()

   2: {

   3:     $("#header").hide("fast", function(){alert("Hidden")});

   4:     $("#header").show("slow");

   5: }

The last item in the basic effects is the toggle() function.  This function allows you to show and hide an element without having to keep track of the element's state.  Taking our code snippet that we used to just call the hide() function, we can replace it with toggle().  Now, every time we click on our button, the visibility of our <div> tag will change.

   1: function visibilityHelper()

   2: {

   3:     $("#header").toggle();

   4: }

Notice, toggle() provides no default animation and does not allow for you to adjust the speed nor call another function once finished.  This function is simply setting display:none; and then removing it for you.

Slide Effects

Sliding effects are very similar to the basics we just covered; however, there are a few differences. 

• All Sliding Effects functions require the speed parameter
• You can only Slide Up (hide the element) and Slide Down (show the element)

Sounds pretty simple overall.  Let's replace our toggle() function call from our last example with the slideUp("slow") function.

   1: function visibilityHelper()

   2: {

   3:     $("#header").slideUp("slow");

   4: }

In order to reveal an element after it is hidden, we can call the slideDown("speed") function in the same fashion as the show() function.

   1: function visibilityHelper()

   2: {

   3:     $("#header").slideUp("slow");

   4:     $("#header").slideDown("slow");

   5: }

In addition, sliding effects also supply a slideToggle("speed") function that allows us to toggle the element's visibility with the slide animation without having to monitor the element's state. 

   1: function visibilityHelper()

   2: {

   3:     $("#header").slideToggle("slow");

   4: }

Lastly, all 3 of the sliding effect functions have an optional parameter to allow for a function to be called once the animation has finished.

Fade Effects

The last set of effects for this post are the fade effects.  This set of effect functions allow the developer or designer show and hide elements by having them fade in and out of the page.  Just like the sliding effects, the fade effect functions all require the speed of the animation to be specified as illustrated below.

   1: function visibilityHelper()

   2: {

   3:     $("#header").fadeOut("slow");

   4:     $("#header").fadeIn("slow");

   5: }

In the code, we used the fadeOut("slow") and fadeIn("slow") functions to fade the element out and in respectively.  Like their sliding counterparts, they also have the optional parameters to call functions once the animation is finished.

Unlike basic and sliding effects, the fade effects do not have a toggle option.  Instead, fade effects get a special function called fadeTo().  This function requires 2 parameters, the duration of the animation, and the opacity value that the animation will fade to.  The opacity value is a decimal value between 0 and 1.00.  In addition to the 2 required parameters, an optional third is available to call a function when finished like the rest of the functions discussed in this post.  Below is a code example of using the fadeTo() function.

   1: function visibilityHelper()

   2: {

   3:     $("#header").fadeTo("slow", 0.50);

   4: }

One of the nice things about the fadeTo() function is that it provides a very simple way to control the opacity of elements across browsers without having to write a line of CSS.  This simplifies development for custom light boxes as well other common visuals seen on the Internet today.

Summary

My first thoughts while playing around with jQuery's effects was that it was a quick and simple way to add some simple animations to web pages that I've done by hand with some frustrations before.  After exploring the effects further and truly focusing on the effect applications further, I began to fully appreciate the power of these functions.

One effect set that I did not discuss in this post was the Advanced Effect Functions.  I have excluded them specifically because I'm still playing with them myself, and I want to make sure that I can provide accurate information on how to use such.  Again, the information found on jQuery's web site for effects is excellent and I highly encourage anyone wanting to learn more to check it out.

In the next post in this series, we'll be introduced to the jQuery Validation plug-in for easy client-side form validation.  Later on, I'll begin to provide examples on how to integrate jQuery into typical Asp.Net 2.0 applications and some of the challenges that a person may face.