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

明らかに、デザインに必要な色に変更します。

EDITここ

がFiddle

私の最後にクロムに移行の

Answer 2

jQueryのfadeIn関数を検討することができます。

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

Answer 3

マイケルマッコイは、彼のコメントで完全に正しいです。 CSSを使うとGPUアクセラレーションの恩恵を受けると同じことをやっていますが、コードを軽くすることができます。

これは離れて、あなたのコードは、2個のエラーがあります。とにかく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); 

を逃すi++

を逃す

• を、このアイデアをドロップします。

  だから、クラスを追加するだけで$('.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); 
  }