Question

我有div背景为红色。当用户打开页面时，我希望它淡出背景颜色。 Div内容应保持可见。

我用过：

 $(".notificationExtraDetailsBlockColored").animate(5000, "slow", function () {
      $(this).fadeIn("slow");
      $(this).css("background-color", "#FFF");
 });

但它似乎只改变了背景颜色，而不是像淡出效果那样。

Answer 1

您将使用rgba查看动画背景颜色。不幸的是，使用jQuery动画颜色意味着loading one not-so-small plugin，这是原始jQuery颜色插件的扩展，所以如果不需要太灵活的东西，你总是可以使用setInterval为相关元素设置动画：

// rgb(255, 255, 255) = white
var color = [255, 255, 255].join(',') + ',',
    transparency = 1,
    element = this,
    timeout = setInterval(function(){
        if(transparency >= 0){
            element.style.backgroundColor = 'rgba(' + color + (transparency -= 0.015) + ')';
            // (1 / 0.015) / 25 = 2.66 seconds to complete animation
        } else {
            clearInterval(timeout);
        }
    }, 40); // 1000/40 = 25 fps

当然，如果您需要任何复杂的东西，您可以随时使用我上面提到的插件。 Rgba仅在IE9 +和所有其他现代浏览器中受支持，因此您可能希望为IE8及以下版本的用户提供替代方案。

请参阅此处的代码：http://jsfiddle.net/DCFem/2/

仅淡出背景色

1 个答案: