Jqueryとエラーが発生した関数の間隔を設定する

Question

Jqueryを使用してJavaScriptのドキュメントを作成しています。アルファ値を別に管理しながら色の配列を循環させようとしています。 "setColor"関数はうまく動作しますが、 "manageAlpha"関数はまったく動作しません。 私の目標は、alphaVarを.15秒の間隔でPI/10の増分を増やしてsin関数の絶対値に設定することです。私はこの問題を理解できません！助けてください！

var backgroundCol = new Array(53); 
var alphaVar; 

backgroundCol[0] = 'rgba(255,192,192,' + alphaVar + ')'; 
//(array truncated) 

var colorCounter = -1; 
var numberOfColors = 53; 
var colorTimer; 
var alphaTimer; 
var sinCounter = 0; 
var goingUp = true; 

function setColor() { 

    $('body.page1').css('background-color', (backgroundCol[colorCounter])); 

    colorCounter += 1; 
    if (colorCounter >= numberOfColors) { 
    colorCounter = -1; 
    } 

} 

function manageAlpha() { 

    sinCounter += Math.PI/10; 
    alphaVar = abs(sin(sinCounter)); 
} 

$(document).ready(function() { 

    $('body.page1').css('background-color', (backgroundCol[colorCounter])); 

    //colorTimer = setInterval(setColor, 150); 
    alphaTimer = setInterval(manageAlpha, 150); 

}); 

Answer 1

まず最初に、絶対値と罪の機能を使用使用するためには、使用Math.abs()とMath.sin()：

function manageAlpha() { 
    sinCounter += Math.PI/10; 
    alphaVar = Math.abs(Math.sin(sinCounter)); 
} 

その後、他の問題がbackgroundCol配列の値が更新されないということですalphaVarが変更されたときに自動的に表示されます。あなたは

backgroundCol[0] = 'rgba(255,192,192,' + alphaVar + ')'; 

を定義するときalphaVarの値が定義されていませんので、backgroundCol[0]はalphaVarの値は後で変更しても、文字列"rgba(255,192,192,undefined)"です。

.css()を呼び出すと、アルファベットをbackgroundCol配列から除外して追加することができます。

だから、のようなもの：

backgroundCol[0] = 'rgba(255,192,192,'; 

function setColor() { 
    $('body.page1').css('background-color', backgroundCol[colorCounter] + alphaVar + ')'); 
}