jquery淡入淡出问题

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

Answer 3

在没有插件的情况下，您不能“原生”地为颜色淡入淡出设置动画效果的原因是，JQuery不能递增地调整元素上目标css属性的值。任何以十六进制或其他非整数/十进制编码为单位的CSS属性都会出现完全相同的问题。JQuery只是递减/递增值，以实现淡入淡出效果和动画。按照Sarfraz的建议使用JQuery颜色plugIn。

编辑：

你仍然错过了point...the淡入淡出效果的前提是能够调整某些CSS属性。更改颜色很可能与尝试更改不透明度和其他CSS属性的效果相冲突。