Wie ein Bild Wechsel mit JQuery fadein

Question

Im Moment habe ich eine Website, die die JQuery-Zyklus-Plugin verwendet. Die Website verwendet das Plugin ein Haupthintergrundbild zu ändern. Der Zyklus-Plugin erstellt auch eine Paging-Abschnitt im HTML, die in meinem Fall habe ich angepasst haben eine Reihe von Bildern zu sein.

Was ich versuche, das Pager Bild zu tun ist, zu ändern, wenn diese bestimmte „Seite“ aktiviert ist. Ich habe es geschafft, eine Bildänderung zu erhalten, aber da die Seite verwendet ganz Übergänge glatt überall i von einem Bild zum anderen eine glatte verblassen haben möchte, dann wieder zurück.

Sie können ein Beispiel dafür im Moment sehen hier: http://pegaso.mammalworld.com/ um über die „Galerie“ Bild schweben kann man sehen, wie es funktioniert.

Dies ist die Funktion ich habe, dass ich ändern müssen, anstatt die fadeout / FadeIn dass JQuery Anwendungen, im Idealfall wäre es ein einfaches Fade auf die nächste Bildquelle sein und dann wieder ausgeblendet:

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

, um die Wirkung auf der Website zu sehen, nur schweben über die Galerie und zusehen, wie die Veränderungen Hintergrundbild, so dass während des gesamten Pager Bild zu verändern. Die Fade muss so glatt, wie es für das Hintergrundbild ist ...

Hilfe bitte! :)

Answer 1

In Ihrem Fall, in dem Sie zwei feste Bilder haben nicht, es ist so schwierig.

1. Stellen Sie den Behälter Hintergrund auf dem Bild, das verblassen wollen.

2. Funktion jQuery das Bild auszublenden, das Hintergrundbild freigelegt wird.

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

3. Profit.

Fiddle

http://jsfiddle.net/v6dtE/