orosz.bence orosz.bence - 2 months ago 21
Javascript Question

fadein and fadeout animation for every background image

Here is the script where the images are changing after 50 seconds:

<script>
var mutato;
mutato=0;
var kepek = new Array();
kepek[0] = 'url("bg0.jpg")';
kepek[1] = 'url("bg1.jpg")';
kepek[2] = 'url("bg2.jpg")';
kepek[3] = 'url("bg3.jpg")';
kepek[4] = 'url("bg4.jpg")';
kepek[5] = 'url("bg5.jpg")';
kepek[6] = 'url("bg6.jpg")';
kepek[7] = 'url("bg7.jpg")';
kepek[8] = 'url("bg8.jpg")';
kepek[9] = 'url("bg9.jpg")';
kepek[10] = 'url("bg10.jpg")';
kepek[11] = 'url("bg11.jpg")';
kepek[12] = 'url("bg12.jpg")';
kepek[13] = 'url("bg13.jpg")';
kepek[14] = 'url("bg14.jpg")';

function kepcsere()
{


document.getElementById("hatter").style.backgroundImage =kepek[mutato];
mutato++;
if (mutato>=kepek.length)
{
mutato=0;
}

t = setTimeout(function(){kepcsere()},50000);

}




but I would like to have a fade in/out animation for every image.

Here is the html:

<body id="hatter" onload="kepcsere()">

Answer Source

Here's a solution that seemed to work pretty well for me:

Put a div element into the body like this:

<body>
    <div id="hatter" style="height:100%;">
    </div>
</body>

And make your javascript look something like this:

$(document).ready(function() {
    var mutato;
    mutato=0;
    var kepek = new Array();
    kepek[0] = 'url("http://91ef69bade70f992a001-b6054e05bb416c4c4b6f3b0ef3e0f71d.r93.cf3.rackcdn.com/tower-bridge-100518.jpg")';
    kepek[1] = 'url("http://91ef69bade70f992a001-b6054e05bb416c4c4b6f3b0ef3e0f71d.r93.cf3.rackcdn.com/millennium-bridge-100521.jpg")';
    kepek[2] = 'url("http://91ef69bade70f992a001-b6054e05bb416c4c4b6f3b0ef3e0f71d.r93.cf3.rackcdn.com/ponte-vecchio-florence-1001037.jpg")';
    function kepcsere()
    {
        $('#hatter').animate({opacity: 0}, 'slow', function() {
            $(this).css({
                'background-image': kepek[mutato]
            }).animate({opacity: 1}, 'fast');
        });
        mutato++;
        if (mutato>=kepek.length)
        {
            mutato=0;
        }

        setTimeout(function(){kepcsere()},5000);
    }
    kepcsere();
});

The goal of this method is to 1) fade out the div, 2) change the background-image, 3) fade the div back in.

Let me know if you have any questions!

Here is the working Fiddle.