Question

当我点击另一个元素时，我试图将背景颜色添加到.top-barz元素，但我希望将其作为持续时间为1秒的动画。我对javascript很新，不知道该怎么做？

我想将rgba(36,36,36, .1)的不透明度更改为rgba(36,36,36, 1)

我已经提出了这个代码并将其放入我的on click函数中，但这显然不起作用：

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

迈克尔麦考伊的评论是完全正确的。我会这样做，因为如果你使用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);
}

Answer 3

以下是一些示例代码，可帮助您入门

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端正常工作

Javascript - 随时间间隔改变背景颜色不透明度

3 个答案: