如何淡化背景而不是仅仅改变颜色

Question

我试图让我的背景褪色成颜色，而不仅仅是改变。如果可能的话，我也想让它重复一遍！

我现在正在使用 JQuery 来更改正文的 CSS。

$(document).ready(function(){
     var bgColor = ["#FF0000", "#FF00A6", "#FF00FF"];
     var i = 0;
     var bgRotate = setInterval(function(){    
         $('body').css({'backgroundColor' : bgColor[[i]]});
         i++;
      }, 1000);   

     });

这是fiddle。

Answer 1

只需使用CSS transitions。它们比 jQuery 的过渡更流畅，并具有 CSS 的所有通常优点（级联、不需要 JS 等）

body { transition: background-color 1s }

要让它重复，请执行以下操作：

$('body').css({'backgroundColor' : bgColor[i%bgColor.length]});

它对数组长度进行除法余数（模）运算。

Answer 2

看this问题

使用jQueryUI框架你可以做到：

$('body').animate({backgroundColor: '#FF0000'}, 'slow');

Answer 3

您可以尝试使用 jQuery 的 animate() 方法对其进行动画处理。假设您有一个带有 CSS 设置的 DIV

#yourDiv{
    background-color: #FFFFFF;
    width: 100px;
    height: 100px;
}

并且您希望在单击 ID 为 darkenButton 的 DIV 后，在 5 秒内将其设置为黑色。可以使用点击事件：

$('#darkenButton').click(function(){
    $('#yourDiv').animate({
        background-color: '#000000'
    }, 5000); 
});

Answer 4

您必须使用 .animate() 而不是 .css()。对于重复，您必须创建一个函数：

function changeColor(i) {
    var bgColor = ["#FF0000", "#FF00A6", "#FF00FF"];
    if(i > bgColor.length) { i = 0; }
    $('body').animate({'backgroundColor' : bgColor[[i]]});
    var bgRotate = setTimeout(function() {    
        changeColor(++i);
    }, 1000); 
}

Answer 5

你可以使用 css3 来做到这一点:)

@-webkit-keyframes blink {
    0%   { background:red; }
    50%  { background:green;}
    100% { background:red; }
 }
 @-moz-keyframes blink {
    0%   { background:red; }
    50%  { background:green;}
    100% { background:red; }
 }
 @-ms-keyframes blink {
    0%   { background:red; }
    50%  { background:green;}
    100% { background:red; }
 }
  body{
 -webkit-animation: blink 1s infinite;
 -moz-animation:    blink 1s infinite;
 -ms-animation:     blink 1s infinite;
 }

Answer 6

为什么不使用 @keyframes 的 CSS3 动画，因为这个问题也被标记为 CSS，所以想发布一个

一切都是不言自明的，只有animation: demo 3s infinite linear;这一行只是4个属性的简写，即

• animation-name
• animation-duration
• animation-iteration-count
• animation-timing-function

在这里，我使用了infinite，因此它会不断迭代，并且我使用linear 以获得一致的动画。

Demo

html, body, div {
    height: 100%;
    width: 100%;
}

div {
    -webkit-animation: demo 3s infinite linear; 
    animation: demo 3s infinite linear;
}

@-webkit-keyframes demo {
    0% {
        background: #FF0000;
    }
    33% {
        background: #0f0;
    }
    100% {
        background: #f0f;
    }
}


@keyframes demo {
    0% {
        background: #FF0000;
    }
    33% {
        background: #0f0;
    }
    100% {
        background: #f0f;
    }
}

Answer 7

当var i's到达array的末尾时，您可以简单地使用更改var i's的值，检查此http://jsfiddle.net/33VgU/3，这将无限重复背景，如果您随机更改颜色而不是使用Math.random函数来获取var i 的值。