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

我想让它具有颜色，而不仅仅是改变。如果可能的话，我也想重复它！如何淡化背景而不是仅仅改变颜色

我现在正在使用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。

来源

2014-02-14 Oontzie

查看http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor还有一个jQuery插件和一个CSS只回答 –

为什么不使用CSS3动画此使用@keyframes因为这个问题也被标记为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; 
    } 
}

来源

2014-02-14 08:15:44

是的，比JS好多了。 – bjb568

只需使用CSS transitions。他们比jQuery的过渡更平滑，提供所有CSS的”平常的好处（需要级联，没有JS等）

body { transition: background-color 1s }

为了使重复，这样做：

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

它做了数组长度上的除法（模）运算。

来源

2014-02-14 08:09:31 bjb568

看this问题

使用jQueryUI的框架，你可以这样做：

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

来源

2014-02-14 08:10:20 Merlin

哪个问题？哦，只是一个SO格式化故障。 – bjb568

这一个http://stackoverflow.com/questions/967815/how-do-you-fade-in-out-a-background-color-using-jquery – Merlin

是的，它现在有效。它曾经是[1]，而不是链接。还是你编辑它？ – bjb568

您可以尝试使用jQuery的animate()方法来制作动画..让我们说，你有与CSS设置

一个DIV

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

并且您想在5秒钟内将其变为黑色，点击后带有编号为的DIV darkenButton。您可以使用单击事件：

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

来源

2014-02-14 08:12:21 Dropout

您必须使用.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); 
}

来源

2014-02-14 08:13:20

您可以使用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; 
}

来源

2014-02-14 08:14:51

您可以使用简单的改变，当它到达的array末的var i's值，看看这个http://jsfiddle.net/33VgU/3，这将重复的背景无限的，如果你改变颜色随机不是使用Math.random功能得到值为var i。

来源

2014-02-14 08:15:48 Arjun

对于淡入淡出，您不能使用 –

，您可以使用animate（）函数而不是css（）。 – Arjun

然后你应该修复你的答案。或者删除它，因为已经有答案了 –

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

回答

相关问题