Help
DHTML effects used to be painful to implement, but these days they're standard practice. You can add the visual cues to your layout that really make it snap by by taking advantage of effects available in Javascript libraries like jQuery. In the following excerpt from jQuery Cookbook the authors explain how to slide and fade elements in and out of view.
We want to reveal or toggle a block of content into view. This can be triggered by the user clicking some element or can be fired by some other event.
Rather than just showing and hiding, which could be jarring visually, we want to create a gradual effect to reveal the content into view.
For these solutions, I’ve assumed we want to allow the user to toggle the effect.
Solution
For reference, if we were just to show the element, our code would be as follows:
$(document).ready(function () {
$('#animate').click(function () {
$('.box').show();
});
);
If we were to toggle the box but just toggle
from visible and hidden, we would use the following instead of
.show():
$('.box').toggle();
However, our solution wants to be a little more visually engaging than just toggling the display property. So, let’s look at using the slide and fade methods:
Slide
$(document).ready(function () {
$('#animate').click(function () {
$('.box').slideToggle('slow');
});
});
Fade
Because there’s no opacity toggle function, either we can use a
combination of fadeIn and
fadeOut:
$(document).ready(function () {
$('#animate').click(function () {
var $box = $('.box');
if ($box.is(':visible')) {
$box.fadeOut('slow');
} else {
$box.fadeIn('slow');
}
});
});
or we can create our own fade toggle animation, using the
fadeTo method:
$(document).ready(function () {
$('#animate').click(function () {
$('.box').fadeTo('slow', 'toggle');
});
});
However, I’m of the opinion that it reads better for future
maintenance if we use the animate method:
$(document).ready(function () {
$('#animate').click(function () {
$('.box').animate({ opacity : 'toggle' }, 'slow');
});
});
Both
If we want to toggle the height and opacity together, we can reuse the previous solution and add the height to toggle at the same time. This would cause the box to fade out and slide up at the same time:
$(document).ready(function () {
$('#animate').click(function () {
$('.box').animate({
opacity : 'toggle',
height: 'toggle'
}, 'slow');
});
});
Discussion
As we can see from the previous solutions, the slide and fade methods are the next step up from the straight show (and hide) and toggle methods. The slide methods come in the following flavors:
slideUpslideDownslideToggle
The fade methods don’t have an explicit toggle feature, but it can be achieved. Fading has the following methods:
fadeInfadeOutfadeTo
With the exception of fadeTo, all these methods take speed as the
first parameter and a callback function as the
second—both of which are optional. The callback function is executed
once the animation is complete, and the context is set to the element
the animation ran against; i.e., the this variable is the current element.
The reason I would choose to use animate over
fadeTo to toggle opacity is that the
fadeTo parameters read the wrong way around. If a new
developer were coming to the code, using the animate function almost
reads as plain English, therefore making it easier to skim and
understand what is happening in the code.
It’s worth also adding that if you use the
show
(or hide) method using a speed, it will animate the height, width,
opacity, margin, and padding all in one animation, as shown in Figure 7.1.
Figure 7.1. Passing a speed in to the show method animates height, width, padding, margin, and opacity
Learn more about this topic from jQuery Cookbook.
Getting started with the jQuery library is easy, but it can take years to fully realize its breadth and depth; jQuery Cookbook shortens the learning curve considerably. You'll learn patterns and practices from 19 leading developers who use jQuery for everything from integrating simple components into websites and applications to developing complex, high-performance user interfaces. The recipes start with the basics and then move into practical use cases with tested solutions to common web development hurdles.
