CODEWITHSUNDEEP
javascriptjquerycssjquery-animatefadein
Stuff
Stuff

Reputation: 103

jquery fade in and out a background image in div - with cross fade

Have been attempting to have a background div auto rotate through a series of images. The fades are flashing and not crossing. Thoughts are to use jquery to swap out the image via css and fade the new one in. A nice crossover might be nice. This is fairly light weight - or so it seems and would rather not use a plugin.

Any insight on why were not getting a smoother crossover/transition? 

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

    };

Upvotes: 1

Views: 5843

Answers (1)

Chase
Chase

Reputation: 9362

If you want a simple example of a rotation check out my jsfiddle: http://jsfiddle.net/3yN8a/2/

The comments are right you need to adjust the background image AFTER the fadeout has completed and you do that by passing a second option that is used as a callback for when its done.

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

Upvotes: 3

Related Questions