Halloween - Jquery, Animate, Top, Left, End of Animation

Here is a quick halloween example, this can obviously be improved, but should help out people get a basic understanding of how to repeat a jquery animation. This is a simple example with a tranparent ghost png.

<style>
body {
background::#000;
overflow-x: hidden;
overflow-y: scroll;
background-color: #000;
}

#ghost {
background:url(img/ghost.png) transparent;
height:128px;
width:128px;
position:absolute;
left:-128px;
overflow:hidden;
}
</style>

<script language="javascript" src="js/jquery-1.8.2.min.js"></script>

<script>

$(document).ready(function () {

function ghost(div){

$(div).css("left","-128px");

// Fading Start
$(div).fadeTo(5000, Math.random(), function() {
// Animation complete.
});
// Fading End

$(div).animate({
left: "+=" + ($("body").width() + 140),
top: (Math.ceil(Math.random()*500)),

},
5000,
function() {
var randomize = Math.ceil(Math.random() * 10000);
setTimeout(function() { ghost(div)},randomize);
}
);

}

ghost("#ghost");

});

</script>

Take note of where "function() {" is within .animate as it allows you to callback once the animation is completed.