Javascript - 用時間間隔更改背景顏色不透明度

Question

我試圖在單擊另一個元素時將背景顏色添加到.top-barz元素，但我希望將其作爲動畫，持續時間爲1秒。我相當新的JavaScript和不知道如何做到這一點？

我想從rgba(36,36,36, .1)改變不透明度動畫到rgba(36,36,36, 1)

我想出了這個代碼，並把它放到我的點擊功能，但是這顯然是不工作：

var topBar = setInterval(function(){ topBarBackground() }, 1000); 

function topBarBackground() { 
    for (var i = 1; i <= 9; i++) { 
    $('.top-barz').css('background-color', 'rgba(36,36,36,.' + i + ')'); 
    } 
} 

clearInterval(topBar); 

Answer 1

下面是一些示例代碼，讓你開始

JQuery的

$('.button').on('click', function() { 
$('.top-barz').addClass('new-color'); 
}); 

CSS

.top-barz { 
background-color:#000; 
-webkit-transition: background-color 1s linear; 
-moz-transition: background-color 1s linear; 
-o-transition: background-color 1s linear; 
-ms-transition: background-color 1s linear; 
transition: background-color 1s linear; 
} 

.top-barz.new-color { 
background-color:#eee; 
} 

很明顯，您可以將顏色更改爲您希望用於設計的任何顏色。

編輯

這裏是Fiddle

似乎是工作在我結束在鍍鉻細

Answer 2

你可以考慮jQuery的fadeIn函數。

$('.top-barz').fadeIn(10000); 

Answer 3

Michael McCoy在他的評論中是完全正確的。我會這樣做，因爲如果您使用CSS，您也將從GPU加速中受益，並且它會使您的代碼更輕。

這家公寓，你的代碼有2個錯誤：

• 失蹤i++
• 失蹤var i

_

function topBarBackground() { 
    for (var i = 1; i < 9; i++) { 
     $('.top-barz').css("background-color", "rgba(36,36,36,." + i + ")"); 
     } 
} 

var myVar = setInterval(function(){topBarBackground()}, 1000); 

不管怎麼說，放棄這一想法。

所以要加類只是做$('.top-barz').addClass('changedColor');

和CSS：

.top-barz { 
    background-color: rgba(36,36,36,.1); 
    -webkit-transition: 1s; 
    -o-transition: 1s; 
    transition: 1s; 
} 
.top-barz.changedColor { 
    background-color: rgba(36,36,36,1); 
}