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的fadeIn函数。

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

Answer 2

这里有一些示例代码可以帮助您入门

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

似乎在我的 chrome 中运行良好

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