Image Fade Out, New Image Fade In..

[Caitlin-havener]

I'm trying to find a good tutorial or something to do the image transition I see on a lot of sites such as this one: http://www.bodymedia.com/. What is the easiest way to do this on page load?

[thescientist]

It's pretty simple in concept, just a little tricky in practice. Using something like jquery would certainly be helpful because it has animate/fade functions which also accept callbacks, so you can be sure that the next image won't load until the previous animation/fade has completed. So using an interval, you would run a function that would increment some sort of index through an array of pictures, (keeping in mind you need to wrap when you reach the end). Then you would want to fade out the previous image, set the src/background with the new image path, and then fade it in.

[ShadowMage]

There's also CSS3 if supporting older browser's is not top priority:http://css3.bradshawenterprises.com/cfimg/ The examples on that page use jQuery to change the CSS, but you wouldn't have to.