How To Change Image With Fading

I'm quite new to js and jquery and I'm trying to do something very simple with my Rails app: I want to switch between 2 images every 3 seconds with a fading effect. Of course, this

Solution 1:

I ended up using JQuery .animate function and I guess it might also work for you.

Here is an example of how I managed to get the animation and fade effect done when changing the src attribute of the image control:

//Refresh the thumbnail
        $(".photo-container").animate({
            opacity: 0.10,
        }, 200, function () {
            $(".photo-info").attr("src", photo);
            ReloadGallery(currentContext); // Just showing extra logic can be use here...
        }).animate({ opacity: 1 }, 200);

It follows 3 steps:

1. Fades out the photo-container div by diminishing the Opacity to 0.10.
2. Executes the callback function after the 200 milliseconds that last the opacity change action of the first step. This function is the one that takes care of changing the src attribute of the image and refreshing the gallery or any other things you need to do.
3. The animation kicks-in again by restoring the opacity of the container back to 1.

Hope this give you a possible idea of how to get your logic working.

regards,