JavaScript
Article

Creating a jQuery Photo Slideshow with fadeIn and fadeOut

By Sachin Bhatnagar

There are many ways to build a simple slideshow nowadays. In this screencast I will demonstrate how to do just this using jQuery’s fadeIn and fadeOut methods. These methods allow you to conveniently animate an element’s visibility, one of the very reasons I’ll use them to build a slideshow.

Sure, you could create a slideshow with CSS3, but animating an element’s visibility using JavaScript gives you greater control of its state. Come and watch the video and see which method works best for you.

This screencast is a sample from my course jQuery: Beyond the Basics. If you liked this screencast, then you should definitely check out the rest of my course on Learnable!

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

Comments
parboy1

I've used the identical code as you presented just to get it working. Unfortunately when the page loads, all my images appear at once in a vertical stack (I haven't applied any css yet). As each image fades the other images move up until there is only one image on the page. At that point the images cycle through normally. What am I doing wrong - the images shouldn't all appear at the beginning? Link to test page: http://dev.jacksonlandscapesc.com/portfolio/test3.php

PaulOB

Then you probably want to hide the list items with css until the js is ready.

e.g.

.slideShow li{display:none}
Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.