• Choose a category
• All
• Classic-Fiction

By Root 1080 0

slideshow ideas for him. First we’ll look at some ways of cross-fading images; that is, fading an image out while another is fading in. Then we’ll look at a few scrolling galleries, and finally a more sophisticated flip-book style gallery. Along the way we’ll pick up a bunch of new jQuery tricks!

Cross-fading Slideshows

If you work in television, you’ll know that unless you’re George Lucas, the only transition effect they’ll let you use is the cross-fade (aka the dissolve). The reason for this is that slides, starbursts, and swirl transitions nearly always look tacky. This also applies outside the realm of television; just think back to the last PowerPoint presentation you saw.

There are different techniques for cross-fading images on the Web—all with pros and cons mostly boiling down to simplicity versus functionality. We’ll cover some of the main methods used to cross-fade items, so that you have a selection to choose from when necessary.

Rollover Fader

The first cross-fader we’ll have a look at is a rudimentary rollover fader; it’s much like the hover effects we’ve already looked at, except this time we’ll perform a gradual fade between the two states. First, we need to tackle the problem of where and how to store the hover image.

This solution works by putting both of our images into a span (or whatever container you like). The hover image is positioned on top of the first image and hidden until the user mouses over it; then the hidden image fades in. To start, we set up our rollover container:

chapter_04/04_rollover_fade/index.html (excerpt)

alt="Darth Fader"/>

To hide the hover image, we employ the usual position and display properties:

chapter_04/04_rollover_fade/style.css (excerpt)

#fader {

position: relative;

}

#fader .to {

display: none;

position: absolute;

left: 0;

}

We now have something juicy to attach our hover event handler to. Knowing that we have two images trapped inside the container, we can access them with the :eq filter: image 0 is our visible image, and image 1 is our hover image.

Note: There’s More than One Way to Select a Cat

We’ve used this method primarily to highlight the :eq selector attribute. There are several other ways we could’ve accessed the two images inside the container: by using the :first and :last filters, the corresponding .eq, .last, or .first actions, the child (>) selector, or simply a class name. There are usually multiple ways to accomplish tasks with jQuery, and the choice often boils down to personal preference.

Here’s the code we’ll use to perform the rollover:

chapter_04/04_rollover_fade/script.js (excerpt)

$('#fader').hover(function() {

$(this).find('img:eq(1)').stop(true,true).fadeIn();

}, function() {

$(this).find('img:eq(1)').fadeOut();

})

There’s nothing new to use here—except that we’re using the advanced version of the stop command (which we first saw in the section called “Animated Navigation” in Chapter 3). We’re specifying true for both clearQueue and gotoEnd, so our fade animation will immediately stop any other queued animations and jump straight to where it was headed (in this case, it will jump straight to the fully faded-out state, so we can fade it back in). This prevents animations from backing up if you mouse over and out quickly.

You’d probably be thinking of using this effect for navigation buttons—which is a good idea! Another consideration, though, is adding the hover image as the link’s :hover state background image in CSS too. That way, your rollover will function as a traditional hover button for those without JavaScript.

JavaScript Timers

The Web is an event-driven environment. Elements mostly just sit on the page waiting patiently for a user to come along and click or scroll, select or submit. When they do, our code can spring to life and carry out our wishes. But there are times when we want to avoid waiting for the user to act, and want to perform a task with a