divの背景をある色から別の色にグラデーションのように変更します。

Question

変数値に応じてdivの背景を赤から緑に変更したいと思います。 var値が1の場合、背景は赤です。しかし、値が1000になると、divの背景が緑色になります。それは赤から緑へのグラデーションを通過するようです。どのようにjQueryを使用しないでこれを行うことができますか？

P.S.変数の値が2秒ごとに増加する

Answer 1

RGBのバニラJSの色の値を使用することができます。

var INTERVAL = 2, //Change this to 2000 to make it change every 2 seconds 
 
    MAX = 1000, //MAX value 
 
    _r = 255, 
 
    _g = 0; 
 

 
var i = 1, 
 
    _rPart = (255/MAX), 
 
    _gPart = (128/MAX); 
 
    
 
var _handler = setInterval(function(){ 
 
    
 
    _r = _r - _rPart; 
 
    _g = _g + _gPart; 
 
    
 
    document.getElementById("container").style.backgroundColor = "rgb(" + 
 
                   Math.floor(_r) + 
 
                   ", " + 
 
                   Math.floor(_g) 
 
                   + ", 0)"; 
 
    if(i == MAX){  
 
     clearInterval(_handler); 
 
    } 
 
    
 
    i++; 
 
    
 
}, INTERVAL);

#container{ 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
}

<div id="container"> 
 

 
</div>

Answer 2

色のグラデーションを持つ配列があるとします（hereを作成できます）。

var colorGradient = ['red'...'dark green']; 

makeAGradient = function(index) { 
    var count = 0; 
    var intervalId = window.setInterval(function(){ 
    $('#my_div').css('background', colorGradient[count]); 
    count +=1; 
    if (count==index) window.clearInterval(intervalId); 
    }, 2000); 
} 

私は上記のコードのようなものを試してみます。