jquery fade in und out ein Hintergrundbild im div - cross fade

Haben versucht, einen hintergrund, div automatische drehen durch eine Reihe von Bildern. Die fades werden blinken-und nicht überqueren. Gedanken sind die jquery verwenden, um die swap-Bild via css und fade den neuen. Eine schöne Frequenzweiche wäre schön. Dies ist relativ leicht im Gewicht - oder so scheint es, und würde lieber nicht mit einem plugin.

Jede Einsicht, warum nicht ein glatter crossover/übergang? 

    setInterval(delayFunction, 10000);

    function delayFunction() {

        setTimeout( function(){
        $('#homeback').fadeOut('slow');    
        $('#homeback').css("background-image","url(images/home_02.jpg)").fadeIn('slow');
    },5000);

        setTimeout( function(){
        $('#homeback').fadeOut('slow');    
        $('#homeback').css("background-image","url(images/home_03.jpg)").fadeIn('slow');
    },10000);

        setTimeout( function(){
        $('#homeback').fadeOut('slow');    
        $('#homeback').css("background-image","url(images/home_04.jpg)").fadeIn('slow');
    },15000);

        setTimeout( function(){
        $('#homeback').fadeOut('slow');    
        $('#homeback').css("background-image","url(images/home_01.jpg)").fadeIn('slow');
    },20000);

    };
  • Sie müssen ändern Sie den hintergrund Bild nach dem fadeOut abgeschlossen hat, nicht?
  • Die Anwendung eines neuen Hintergrundbild und die fadIN-Funktion unabhängig sind, was Sie suchen, überlagern sich zwei Bilder übereinander und passen Sie jedes Bild den alpha-Kanal gleichzeitig. Ich hab auf meinem Handy jetzt, aber wenn das nicht beantwortet, morgen werde ich das prüfen.
InformationsquelleAutor Stuff | 2013-09-26
  1. 3

    Möchten Sie ein einfaches Beispiel für eine Drehung check out my jsfiddle: http://jsfiddle.net/3yN8a/2/

    Sind die Kommentare Recht müssen Sie die hintergrund-Bild, NACH dem fadeout beendet hat, und Sie tun, dass durch die übergabe eine zweite option, die verwendet wird als callback für, wenn Ihre getan.

    $(selector).fadeout('speed',function(){
     //execute your background switch then fade in.
});
    InformationsquelleAutor Chase
Schreibe einen Kommentar