using jquery to transition between images

Question

I have two images that are of same size and text but different colors (they are used as logos). I would like to slowly automatically transition between the two images using jQuery. First, I was going to make a GIF image out of the two images but then thought that perhaps jQuery can be used.

Is this possible with jQuery?

I want the transition to happen without any input from the user and it can happen every X seconds.

Please let me know how this can be done.

Answer 1

I think this would definitely help

http://addyosmani.com/blog/css3transitions-jquery/

also this

http://jquery-howto.blogspot.com/2009/05/replacing-images-at-time-intervals.html

here is a jquery plugin for this

http://plugins.jquery.com/project/bgImageTransition

Answer 2

Yes, you can put the new image on top of the current one, using absolute positioning, then use fadeTo to fade in the new image. You can use a simple setInterval to make this happen periodically.

EDIT: fadeTo lets you go to a specific level of transparency. Easier just to use fadeIn, which will go from 100% to 0% transparency.