Question

This script sets a random color to the body and a div and should just fade between them:

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

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

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()

but there is no fade my color change happens instantly. Can anyone help?
here you can see a working example.

Answer 1

If you just wanted to fade between the divs and the background, what about http://jsfiddle.net/K2BF3/? I messed up the color change code and a timeout, but the fade seems to be working…

Update: I’m not sure what I’m doing myself (why all this recursion-like calling if there’s setInterval?), but http://jsfiddle.net/K2BF3/3/ displays even better fades.

Update: I know messing around incorrectly with jsfiddle, but http://jsfiddle.net/KLN24/ is finally a smooth transition.