how to insert a fadein and fadeout effect?

Question

This code changes the background every 20 seconds to

How do I insert the fadein and fadeout effect ?

My jQuery code

    var bg = $('#bg');
    var backgrounds = new Array(
        'url(1.jpg)',
        'url(2.jpg)',
        'url(3.jpg)',
        'url(4.jpg)');

    var current = 0;

    function nextBackground() {
        bg.css(
            'background',
        backgrounds[current = ++current % backgrounds.length]);
        setTimeout(nextBackground, 20000);
    }

    setTimeout(nextBackground, 20000);
    bg.css('background', backgrounds[0]);

take a look at http://stackoverflow.com/questions/20255903/change-the-body-background-image-with-fade-effect-in-jquery — DebbieMiller, Nov 12 '14 at 12:47

score 0 · Accepted Answer · answered Nov 14 '14 at 13:13

Tks! I found one solution

Code

var currentBackground = 0;

var backgrounds = [];

backgrounds[0] = '2.jpg';

backgrounds[1] = '3.jpg';

backgrounds[2] = '4.jpg';

backgrounds[3] = '5.jpg';

backgrounds[4] = '6.jpg';

function changeBackground() {

currentBackground++;

if(currentBackground > 4) currentBackground = 0;

$('#bg').fadeOut(500,function() {
    $('#bg').css({
        'background-image' : "url('" + backgrounds[currentBackground] + "')"
    });
    $('#bg').fadeIn(500);
});


setTimeout(changeBackground, 30000);

}

$(document).ready(function() {

setTimeout(changeBackground, 30000);

});

how to insert a fadein and fadeout effect?

1 Answers1