How to fadein an image change with JQuery

Question

Hiya All,

I currently have a site that uses the JQuery cycle plugin. The site uses the plugin to change a main background image. The cycle plugin also creates a paging section in the HTML which in my case i've customized to be a set of images.

What i am trying to do is change the pager image once that particular "page" is activated. I have managed to get an image change but as the site uses quite smooth transitions throughout i would like to have a smooth fade from one image to the other, then back again.

You can see an example of this at the moment here: http://pegaso.mammalworld.com/ by hovering over the "gallery" image you can see how it is functioning.

This is the function i have that i will need to modify, rather than the fadeout/fadein that Jquery uses, ideally it would be a simple fade to the next image source and then fade out again:

function onAfter() {

    var myclass = $( ".activeSlide" ).find('img').attr('class');
    //alert(myclass);

    switch (myclass) {
        case "image-1":
            $(".image-1").attr("src","/images/image_small_01_off.jpg");            
            $('.image-2').fadeTo('fast', 0.5, function() {
                $(this).attr("src","/images/image_small_02.jpg").fadeTo("slow", 1);
            });

        break;
        case "image-2":
            $(".image-2").attr("src","/images/image_small_02_off.jpg");
            $('.image-3').fadeTo('slow', 1, function() {
                $(this).attr("src","/images/image_small_03.jpg").fadeTo("slow", 1);
            });                
        break;

        case "image-3":
            $(".image-3").attr("src","/images/image_small_03_off.jpg");
            $('.image-4').fadeTo('slow', 1, function() {
                $(this).attr("src","/images/image_small_04.jpg").fadeTo("slow", 1);
            });
        break;

        case "image-4":
            $(".image-4").attr("src","/images/image_small_04_off.jpg");
            $('.image-5').fadeTo('slow', 1, function() {
                $(this).attr("src","/images/image_small_05.jpg").fadeTo("slow", 1);
            });
        break;

        case "image-5":
            $(".image-5").attr("src","/images/image_small_05_off.jpg");
            $('.image-6').fadeTo('slow', 1, function() {
                $(this).attr("src","/images/image_small_06.jpg").fadeTo("slow", 1);
            });
        break;

        case "image-6":
            $(".image-5").attr("src","/images/image_small_05_off.jpg");
            $('.image-6').fadeTo('slow',1, function() {
                $(this).attr("src","/images/image_small_06.jpg").fadeTo("slow", 1);
            });
        break;

        default :
        $(".image-1").attr("src","/images/image_small_01_off.jpg");
        $(".image-2").attr("src","/images/image_small_02_off.jpg");
        $(".image-3").attr("src","/images/image_small_03_off.jpg");
        $(".image-4").attr("src","/images/image_small_04_off.jpg");
        $(".image-5").attr("src","/images/image_small_05_off.jpg");
        $(".image-6").attr("src","/images/image_small_06_off.jpg");
        break;
    }

}

UPDATE

To see the effect on the site, just hover over the gallery and watch as the background image changes, thus changing the pager image throughout. The fade needs to be as smooth as it is for the background image...

Help Please! :)

Answer 1

In your case where you have two fixed images it's not that difficult.

1. Set the container background to the image you want fade to.

2. jQuery function to fade out the image, exposing the background image.

   $('img').hover(function() {
        $(this).animate({
            opacity: 0
        }, 500);
    }, function() {
        $(this).animate({
            opacity: 1
        }, 500);
    });​
   

3. Profit.

Fiddle

http://jsfiddle.net/v6dtE/