javascriptで色の遷移を設定するには？

Question

誰かがこれを述べる前に、はい、私はあなたがcssで物事を変えることができることを知っています。しかし、私はJavaScriptの背景色をどのように遷移させるかを知りたい。私はex1のidで緑の色にdivの背景を変更するこの関数に取り組んでいますが、setInterval関数は奇妙な一度だけ実行されています。

CSS：

<style type="text/css"> 
div#ex1{color:white; background:black; width:300px; padding:0px 10px 10px; margin-bottom:10px;} 
div#ex1:hover{cursor:pointer;} 
div#ex1 h2{border-bottom:double 3px white; text-align:center; padding: 5px 0; margin: auto -10px;} 
div#ex1 p{text-indent:5px;} 
</style> 

HTML

<div id="ex1"> 
    <h2>Transition Color</h2> 
    <h4>Text:</h4> 
    <p>Church-key seitan listicle locavore, mixtape biodiesel readymade crucifix health goth flexitarian direct trade mlkshk iPhone. Banjo tote bag readymade +1 skateboard deep v. Mixtape cred readymade gentrify. Banh mi keytar butcher, skateboard knausgaard </p> 
</div> 

Javascriptを：

document.getElementById('ex1').addEventListener('mouseover', function(e){ 
var tar = this; 

var counter; 

var backG = window.getComputedStyle(tar,null).getPropertyValue('background-color'); 

console.log(backG); 

var re,gr,bl; 
gr = 0; 
bl = 0; 

function chColor(tar) 
{  gr =+31; 
     bl=+10; 
    if (gr <153 && bl <51) 
    { console.log('This is running'); 
    tar.style.backgroundColor = 'rgb(0,'+gr+','+bl+')'; 
    } 
    else 
    { 
    clearInterval(counter); 
    console.log(backG); 
    console.log('The change has ended'); 
    } 
} 

counter = setInterval(chColor(tar),100); 

}, false); 

Answer 1

たsetIntervalは、各間隔で呼び出します最初の引数として関数への参照を取ります。あなたが持っている方法では、関数からの戻り値を渡しています。これを試してください：あなたは+=なく=+を使用したいと思うように、コードの

setInterval(function() { 
    chColor(tar); 
},100); 

Answer 2

これらの2行は、修正する必要があります。そうしないと、値は決して増加しません。

gr += 31; 
bl +=10; 

次にmcgraphixの投稿を参照してください。テキストがマウスオーバーするとアニメーションに色が変わるようにするには、これを行う必要があります。 （私もそれについて言及しようとしていましたが、彼は私にそれを打ち負かしました:)