How to make alternate background images animation for a web page

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 background with 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>