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); 
}