如何淡化背景而不是僅僅改變顏色

我想讓它具有顏色，而不僅僅是改變。如果可能的話，我也想重複它！如何淡化背景而不是僅僅改變顏色

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

然後你應該修復你的答案。或者刪除它，因爲已經有答案了 –

如何淡化背景而不是僅僅改變顏色

回答

相關問題