Comment FADEIN un changement d'image avec JQuery

Question

J'ai actuellement un site qui utilise le plug-in du cycle JQuery. Le site utilise le plugin pour changer une image principale d'arrière-plan. Le cycle plugin crée également une section de recherche de personnes dans le code HTML qui dans mon cas je l'ai personnalisé à un ensemble d'images.

Qu'est-ce que je suis en train de faire est de changer l'image de téléavertisseur une fois que « page » particulière est activée. J'ai réussi à obtenir un changement d'image, mais que le site utilise des transitions tout à fait lisse tout au long je voudrais avoir un fondu lisse d'une image à l'autre, puis de nouveau à nouveau.

Vous pouvez voir un exemple de ce au moment ici: http://pegaso.mammalworld.com/ en plaçant le curseur sur l'image « galerie », vous pouvez voir comment il fonctionne.

Ceci est la fonction que j'ai que je devrai modifier, plutôt que le fadeout / fadein que les utilisations Jquery, idéalement, il serait un fondu simple à la prochaine source d'image et puis fondu à nouveau:

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, juste Survoler la galerie et montre que les changements d'image d'arrière-plan, changeant ainsi l'image pager tout au long. Le fondu doit être aussi lisse que pour l'image de fond ...

Aide S'il vous plaît! :)

Answer 1

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

1. Définissez le fond du conteneur à l'image que vous voulez Fade.

2. jQuery fonction de fondu enchaîné de l'image, l'exposition de l'image d'arrière-plan.

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

3. Profit.

Fiddle

http://jsfiddle.net/v6dtE/