Skip to main content

Creating a jQuery Photo Slideshow with fadeIn and fadeOut

By Sachin Bhatnagar

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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!

Sachin began dabbling with computers at the age of 14 when his Dad bought him a Sinclair Spectrum home computer. An early exposure to coding and an equal amount of passion for visual effects led him to step into both these industries. For the past 15 years, Sachin has been actively involved in the Techno-Creative education industry as an instructor and a curriculum designer. Having trained over 1000 students across two leading education brands in India, Sachin has also been instrumental in designing world class curricula, supervising internationally acclaimed & award winning student short films, fueling innovation and promoting the use of technology at his workplace, crafting brand identities and providing software-as-a-service solutions to corporates. A loving Dad, a world cuisine connoisseur and a budding writer, Sachin believes in perseverance, attention to detail and logic as mantras to a successful professional life.

New books out now!

Learn how Git works, and how to use it to streamline your workflow!


Google, Netflix and ILM are Python users. Maybe you should too?