<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.
