JavaScript
Article
By Sachin Bhatnagar

Creating a jQuery Photo Slideshow with fadeIn and fadeOut

By Sachin Bhatnagar
Last chance to win! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

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!

--ADVERTISEMENT--

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
Get the most important and interesting stories in tech. Straight to your inbox, daily.
Is it good?Is it good?