JQuery: getting started with effects

JQuery offers support for basic effects, like showing, hiding, fading and sliding. Besides that, it also facilitates the construction of new animations by introducing some custom methods which you can reuse to produce some basic animations. Today we’ll be concentrating on two methods: show and hide. Both these methods have two “overloads”: one takes no parameters and the other expects a timeout and an optional callback method (notice that Javascript doesn’t really support the OO overload concept since there’s only a single method which runs some tests on the passed arguments).

Let’s start by looking at what happens when you call the methods and don’t pass any parameters. Calling hide is the same as setting the style’s display to none. Calling show results in setting the style’s display to the default element's style or in recovering the previous default style (more about this in the next paragraphs). Take a look at the following snippet:

<span class="test">span 1</span>
<span>Another span</span>
<div class="test" id="div2">div 2</div>
<input type="button" id="show" value="show" />
<script type="text/javascript">
    $(function() {            
        $("#show").toggle(
                        function(){$(".test").hide();}, 
                        function(){$(".test").show();} );
    });    
</script>

If you run the previous snippet, you’ll notice that the hide method effectively hides all the elements. Calling show ends up setting the style’s display property to the default value of each of the wrapped set elements. As I said before, if you had an initial value applied to the display property when you called hide, that value will be preserved and remembered for a future show call. When that happens, that initial style will be applied again. Take a look at the next snippet:

<span class="test" style="display: block">span 1</span>
<span>Another span</span>
<div class="test" id="div2">div 2</div>
<input type="button" id="show" value="show" />
<script type="text/javascript">
    $(function() {
        $("#show").toggle(
                        function() { $(".test").show(); },
                        function() { $(".test").hide(); } );
    });    
</script>

As you can see, we’re using our old toggle event function helper to alternate between functions for the click event. If you run this sample, you’ll notice that invoking hide still removes the wrapped set elements from the view (by setting the display property to none) and that when you call show, the span retains its initial display value.

If you change the order of the calls (ie, if you change the order of the functions in the toggle method), you’ll end up loosing the initial display of the span. If you don’t believe me, then replace the previous script with the next:

<script type="text/javascript">
    $(function() {
        $("#show").toggle(
                        function() { $(".test").show(); },
                        function() { $(".test").hide(); } );
    });    
</script>

And now hiding/showing will always result in getting the default span’s display.

You’re probably wondering what’s going on with hide and show. It’s not that complicated…in fact, it’s really simple. When you call hide, you end up saving the current display value to a named data slot that is added to each of the wrapped set elements (by using the internal jQuery.data function – we’ll come back to this method in future posts).

Whenever the show method is invoked, it starts by trying to get the previously stored display value from that named slot. If it finds one, it will apply it to the style’s display property. If it can’t find it, then it will simply create a new element of that type (ie, with the same tag name) so that it can get its default style’s display value (notice that this means that you end up adding/removing a new element to the body element to get that information). This is the default behavior you get when you don’t pass any parameters to these methods.

If you decide to use the other “overloads” of these methods, you’ll really be adding animation effects. As I’ve said at the beginning of the post, the second “overload” of this method expects:

• a mandatory speed parameter, which defines the total time that will be taken to show/hide the element in milliseconds;
• an optional callback function which will be called when the animation ends.

Lets update the previous snippet so that it uses these overloads:

<span class="test">span 1</span>
<span>Another span</span>
<div class="test" id="div2">div 2</div>
<input type="button" id="show" value="show" />
<script type="text/javascript">
    $(function() {
        $("#show").toggle(
                        function() { $(".test").hide(500); },
                        function() { $(".test").show(500); } );
    });    
</script>

Running the previous code should result in an animation that changes the width, height, opacity, padding, margins and display of the element. This leads to a more graceful smoothing effect. Instead of specifying the speed in milliseconds, you can also use one of three predefined strings: slow, normal or fast.

If you want, you can also pass a callback function to both the hide and show methods. The function doesn’t receive any parameters and you can access the “animated” DOM element by using the this reference. You should also keep in mind that most of the previous references made about the show and hide methods that take no parameters still hold: the only exception is that calling show on a visible element with a predefined display value doesn’t override that value with the elements default style’s display value.

I know that I’ve said this post would only be about show and hide, but I guess there’s still time (and space) for introducing the toggle method. Take a look at the next snippet:

<span class="test" style="display: block">span 1</span>
<span>Another span</span>
<div class="test" id="div2">div 2</div>
<input type="button" id="show" value="show" />
<script type="text/javascript">
    $(function() {
        $("#show").click(function() { $(".test").toggle(); });
    });    
</script>

The previous snippet produces the same effect as our initial snippet. If you want, you can also pass values for speed and for a callback method:

<script type="text/javascript">
    $(function() {
        $("#show").click(function() { $(".test").toggle("300"); });
    });    
</script>

As you can see, toggle can be used as click helper or as an animation helper that hides and then shows the wrapped set elements. The passed arguments decide which version will be used (notice that passing two functions results in getting the event method).

And that’s it for today. Keep tuned for more on JQuery.