Creating a jQuery Photo Slideshow with fadeIn and fadeOut

JavaScript
1

Originally published at: http://www.sitepoint.com/creating-jquery-photo-slideshow-fadein-fadeout/

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!

Continue reading this article on SitePoint
2

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

3

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

e.g.

.slideShow li{display:none}
4

Thank you!

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.