• Choose a category
• All
• Classic-Fiction

var animationTimer = setInterval(animate, 100);

The timer can now be stopped at any time with the following code:

clearInterval(animationTimer);

And that’s all there is to know about setTimeout and setInterval! Don’t worry if they still seem a little fuzzy: we’ll be using them as required through the rest of the book, and seeing them in context will help you become more accustomed to them.

Fading Slideshow

Cross-fading between two images is fairly straightforward: it’s always fading one image in as the other fades out. If we extend the idea to a whole bunch of images for, say, a rotating image gallery the task becomes a little more difficult. Now we’ll need to calculate which picture to show next, and make sure we wrap around after we’ve shown the last image.

A common trick you’ll see with jQuery image galleries is to fake the cross-fade by hiding all of the images except for the current image. When it comes time to swap, you simply hide the current image, and fade in the next one. Because there’s no true overlap occurring with the images, this doesn’t really qualify as a cross-fade; however, it’s a simple solution that might be all you need, so we’ll look at it first. The next example we’ll look at will be a true cross-fader.

Our basic slideshow will consist of a bunch of images inside a div. We’ll designate one of the images as the visible image by assigning it the class show:

chapter_04/06_slideshow_fade/index.html (excerpt)

We’ll hide all the images by default. The show class has a double purpose for this slideshow: it enables us to target it in CSS to display it, and—equally importantly—it gives us a handle to the current image. There’s no need to keep track of a variable, such as var currentImage = 1, because the class name itself is functioning as that variable.

Now we need to start running a JavaScript timer so we can loop around our images. We’ll write a function that calls itself every three seconds:

chapter_04/06_slideshow_fade/script.js (excerpt)

$(document).ready(function() {

slideShow();

});

function slideShow() {

var current = $('#photos .show');

var next = current.next().length ? current.next() :

↵current.parent().children(':first');

current.hide().removeClass('show');

next.fadeIn().addClass('show');

setTimeout(slideShow, 3000);

}

We know the current image has the class show, so we use that to select it. To find the next image we want to show, we use a bit of conditional logic. If the next sibling exists, we select it. If it doesn’t exist, we select the first image, so the slideshow wraps around.

Important: Ternary Operator

You might be a little confused by the syntax we’ve used to assign a value to the next variable. In JavaScript (and in many other programming languages), this is called the ternary operator. It’s a shortcut for setting a variable conditionally.

The syntax a ? b : c means that if a is true, return b; otherwise, return c. You can use this in variable assignment, as we did above, to assign different values to the same variable depending on some condition. Of course, a longer if / else statement can always do the same job, but the ternary operator is much more succinct, so it’s well worth learning.

So, to resume, the line:

var next = current.next().length ? current.next() :

↵current.parent().children(':first');

can be translated into English as follows: if the current element has a sibling after it in the same container (if the next method returns a non-empty array), we’ll use that. On the other hand, if next returns an empty array (so length is 0, which is false in computer terms), we’ll navigate