Comment changer une image en fondu avec JQuery ?

Question

J'ai actuellement un site qui utilise le plugin JQuery cycle. Le site utilise le plugin pour changer une image de fond principale. Le plugin cycle crée également une section de pagination dans le HTML qui, dans mon cas, a été personnalisée pour être un ensemble d'images.

Ce que j'essaie de faire est de changer l'image du pager une fois que cette "page" particulière est activée. J'ai réussi à obtenir un changement d'image, mais comme le site utilise des transitions assez fluides, j'aimerais avoir un fondu fluide d'une image à l'autre, puis à nouveau.

Vous pouvez en voir un exemple en ce moment ici : http://pegaso.mammalworld.com/ En passant la souris sur l'image "galerie", vous pouvez voir comment elle fonctionne.

C'est la fonction que j'ai et que je vais devoir modifier, plutôt que le fondu en sortie/en entrée que Jquery utilise, l'idéal serait un simple fondu en sortie vers la source d'image suivante, puis un nouveau fondu en sortie :

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

Pour voir l'effet sur le site, il suffit de passer la souris sur la galerie et de regarder l'image d'arrière-plan changer, modifiant ainsi l'image du pager. Le fondu doit être aussi doux que pour l'image d'arrière-plan...

Aidez-nous ! :)

Answer 1

Dans votre cas, où vous avez deux images fixes, ce n'est pas si difficile.

1. Définissez l'arrière-plan du conteneur sur l'image que vous voulez faire disparaître.

2. Fonction jQuery pour faire disparaître l'image, en exposant l'image de fond.

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

3. Profit.

Violon

http://jsfiddle.net/v6dtE/