Question

此脚本设置随机颜色的身体和一个div，并应他们之间刚刚褪去：

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

但没有褪色我的颜色变化发生瞬间。谁能帮忙？ here你可以看到一个working example。

Answer 1

如果您只是想在div和背景之间淡入淡出，http://jsfiddle.net/K2BF3/怎么办？我搞砸了颜色变化代码和超时，但渐变似乎正在工作...

更新：我不知道我在做什么我自己（为什么所有这种递归调用，如果有setInterval？ ），但http://jsfiddle.net/K2BF3/3/显示更好的淡入淡出效果。

更新：我知道用jsfiddle搞错了，但http://jsfiddle.net/KLN24/终于平稳过渡。

Answer 2

You need jQuery color plugin to fade background colors.

Answer 3

你不能动画退色“原生地”没有插件的原因是，JQuery的无法增量调整元素的针对性CSS属性的值。任何具有十六进制单位或其他非整数/十进制编码的CSS属性都具有完全相同的问题。 JQuery只是递减/递增值来实现淡入淡出效果和动画。按照Sarfraz的建议使用JQuery颜色插件。

编辑：

你还缺少点......淡入淡出效果的前提是能够调整某些CSS属性。您很可能会改变颜色与尝试更改不透明度和其他CSS属性的效果相冲突。