Come fadein un cambiamento di immagine con jQuery

Question

Al momento ho un sito che utilizza il plugin ciclo JQuery. Il sito utilizza il plugin per cambiare un'immagine di sfondo principale. Il ciclo di plug crea anche una sezione di paging nel codice HTML che nel mio caso ho adattato per essere una serie di immagini.

Quello che sto cercando di fare è cambiare l'immagine cercapersone una volta quel particolare "pagina" viene attivato. Sono riuscito a ottenere un cambiamento di immagine, ma come gli usi del sito abbastanza liscia transizioni tutto mi piacerebbe avere una dissolvenza liscia da un'immagine all'altra, poi di nuovo indietro.

È possibile vedere un esempio di questo al momento qui: http://pegaso.mammalworld.com/ posizionando il mouse sopra l'immagine "galleria", è possibile vedere come funziona.

Questa è la funzione che ho che ho bisogno di modificare, piuttosto che la dissolvenza / fadein che utilizza jQuery, idealmente sarebbe una semplice dissolvenza per la prossima fonte immagine e poi fade out di nuovo:

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;
    }

}

Aggiorna

Per vedere l'effetto sul sito, proprio con il mouse sopra la galleria e vedere come cambia l'immagine di sfondo, modificando così l'immagine cercapersone in tutto. La dissolvenza deve essere liscio come lo è per l'immagine di sfondo ...

Si prega di Aiuto! :)

Answer 1

Nel tuo caso in cui si dispone di due immagini fisse che non è poi così difficile.

1. Imposta lo sfondo del contenitore per l'immagine che si desidera dissolvenza.

2. funzione di jQuery far scomparire l'immagine, esponendo l'immagine di sfondo.

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

3. Profit.

Fiddle

http://jsfiddle.net/v6dtE/