fadein and fadeout animation for every background image

StackOverflow https://stackoverflow.com/questions/21214522

Question

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()">
Était-ce utile?

La solution

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.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top