How to make alternate background images animation for a web page

For making background images changeable alternatively we can use following code.

This code can be used to make fade animation alternatively on background images for a web page. 

 

Suppose there are two images and we want to change them in the background with a set interval of time.

 

Then we will create two divs and in the script, we will use fadeToggle for each div in setInterval function. Just like as follows: 

 

CODE:

<div id="bg1">
    <img src="img/abhi.jpg" />
</div>
<div id="bg2">
    <img src="img/abhi2.jpg" />
</div>
<script type="text/javascript">
$(document).ready(function() {
    $('#bg2').fadeToggle(8000);

    function loopBackground() {
        setInterval(function() {
            $('#bg1').fadeToggle(8000);
            $('#bg2').fadeToggle(8000);
        }, 8000);
    }
    loopBackground();
});
</script>