jquery fade problem

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

You need jQuery color plugin to fade background colors.

Answer 2

The reason you can't animate the color fade "natively" without a plug-In is that JQuery can't incrementally adjust the value of the targeted css property on element. ANY CSS property that has a unit in hex or some other non integer/decimal encoding will have the exact same problem. JQuery is simply decrementing/incrementing values to achieve the fade effects and animations. Use the JQuery color plugIn as suggested by Sarfraz.

Edit:

You still are missing the point...the fade effect is predicated on being able to adjust certain CSS properties. Most likely you changing the color is conflicting with the effects attempts to change opacity and other CSS properties.

Answer 3

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.