If you’ve been reading my jQuery series of posts sequentially, then you saw [intlink id=”110″ type=”post”]how to incorporate jQuery into an HTML page[/intlink], learned [intlink id=”248″ type=”post”]how to select elements[/intlink] so that you can use or manipulate them, and hopefully grasped [intlink id=”261″ type=”post”]how to add event handlers[/intlink]. In this post, I go into the effects you can apply to add dynamic behavior to an HTML page. Note that I’m discussing just the out-of-the-box effects built into jQuery. A subsequent post will discuss some of the plug-ins that can be brought into a page.
In my second post on jQuery, I already mentioned a couple of functions you can use for various effects: addClass(), hide(), and show(). Of these, addClass() and its sibling removeClass() is the most powerful and flexible. By applying defined CSS classes to elements (or by removing their application), you can dramatically change the appearance of an element. And as CSS allows elements to have multiple classes, so you can add as many as you’d like.
Moving on, the hide() and show() methods do exactly what you’d expect. Each takes an optional speed argument: slow, normal, or fast. Or you could specify how quickly the effect is accomplished by providing a number of milliseconds. The default affect, without a speed argument, is for the transition to occur immediately.
These two methods can be combined under one umbrella using toggle(). Say you have a title and some content:
<h2 id="moreTitle">Click for More Information</h2> <p id="moreInfo">Lorem ipsum dolor sit amet....</p>
You can add a toggle() method to the paragraph that’s revealed and hidden when the H2 is clicked:
$('#moreTitle').click(function() {
$('#moreInfo').toggle();
});
If the P is hidden, then clicking the title will show it. If it’s currently shown, clicking the title will hide it. You can see this in action in the second section in the example. And, as you can see in the example, the rest of the page content gets moved around seamlessly as needed. (Note that in a real application, you’d want to make it all look nicer, perhaps having a +/- graphic that changes to indicate the state.)
As an aside, going back to the addClass() and removeClass() methods, there’s also toggleClass(), which adds or removes a class as appropriate.
Similar to show() and hide() are slideUp(), slideDown(), and slideToggle(). The effect is the same as using show() and hide() with a set speed. See the third example on the demo page.
Next there’s fadeIn() and fadeOut(). Each makes objects appear or disappear, but only through the effect of fading (see the fourth section in the demo). Both take an optional speed argument, which is again slow, normal, fast, or a number of milliseconds. The fadeTo() method changes the opacity of an object. Provide it with a speed as the first argument and the desired opacity as the second. This should be a number from 0.0 (hidden) to 1.0 (full visibility).
Again, see the demo example that goes with this post to view these in action, and look at the source code to see the minimal amount of JavaScript needed to make all this happen. The stress in the demo is on the functionality; real-world implementation would naturally be improved.
A few last things, to wrap this up…
- An entirely different way you can affect an HTML page is to change the elements that exist (i.e., add and remove objects) or change their contents. Both will be discussed in the next post on jQuery.
- You can write custom effects and apply them to elements using the animate() method.
- The stop() method terminates an in-process effect.
- Because of the way jQuery methods work (they often return the thing they were applied to), you can chain multiple methods in one line, thereby creating multiple effects in one step. This next line makes it so that any time a link is clicked, it’s class is changed and it’s partially faded:
$('a').click(function() { $(this).addClass('someNewClass').fadeTo(0.4); });
- Finally, for all of these effects, remember that jQuery lets you select any number of objects on the page at one time, so you can apply one or more effects to one or more elements at the same time (as again the above line of code demonstrates).
UPDATE: I keep forgetting to mention an important jQuery concept here: jQuery will not complain if you attempt to apply an inappropriate method. For example, if you apply hide() to a hidden element, nothing happens, including no errors or exceptions. Or if you call removeClass() on an element that doesn’t have the named class, again, it’s not a problem. This is important to know because it means you don’t need to add a ton of code checking for an element’s properties prior to attempting something (as you should in JavaScript proper or in other programming languages).
So that’s it for built-in jQuery effects. I hope this helped and let me know if you have any comments or questions.
