O'Reilly logo

jQuery Cookbook by Cody Lindley

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

13.7. Cross-Fading Rotating Images

Problem

On pages that contain a large masthead or “hero” image, often seen on e-commerce sites, many different products and/or departments are vying for that top spot. Often, the compromise is to simply have a series of images fade in and out, repeating on a loop. This is all well and good but can often be frustrating to use, because far too many sites overlook the need to pause the rotation in order to glean the very information that is attempting to be conveyed.

The implications of a constant animation should be considered. Most users have learned to ignore annoying ads that contain a lot of motion. The designer/developer must take into account those users who might not want to see the animation, while also trying to read the rest of the page. Worse yet is when a user attempts to read one of the rotating slides, only to have it continue to animate. Therefore, play/pause functionality is be included in this recipe, lest our users be caught in an endless, animated loop.

Solution

Using jQuery’s .fadeIn() and .fadeOut() methods, we can create a nice cross-fade animation that will iterate through an array, changing each image’s opacity based on a set timer. By implementing what we learned from the tabbed document portion of this chapter, we can create links to each image, which not only will cause the target image to come to the forefront but also sets a flagged variable of pause to either true or false, which will start or stop the animation. This makes ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required