jquery fade problem
<p>This script sets a random color to the body and a div and should just fade between them:</p>

<pre><code>function randcolor(){
 return ('#' + (~~(Math.random() * 16777215)).toString(16))
}

var $body = $("body"),
    $div = $("&lt;div style='display:none; position: absolute; top:0; right:0; bottom:0; right:0;'&gt;&lt;/div&gt;")

function havefun(){
    $body.css("background", randcolor()).append($div);
    $div.fadeIn(1000);

    setTimeout(function(){
        $div.fadeOut(500, function(){ $div.remove().css("background", randcolor()).hide(); havefun(); })
    }, 1500);
}

havefun()
</code></pre>

<p>but there is no fade my color change happens instantly. Can anyone help?
<a href="http://jsfiddle.net/8SbQe/1/" rel="nofollow">here</a> you can see a <a href="http://jsfiddle.net/8SbQe/1/" rel="nofollow">working example</a>.</p>
