Question

这个脚本为body和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颜色plugIn。

编辑：

你仍然缺少这一点......淡入淡出效果取决于能否调整某些CSS属性。很可能您更改颜色与尝试更改不透明度和其他CSS属性的效果相冲突。

jquery淡出问题

3 个答案: