Problemeinstellungsintervalle mit Jquery & einer fehlerhaften Funktion

Question

Ich schreibe ein Javascript-Dokument, benutze Jquery, wo ich versuche, durch ein Array von Farben als Hintergrund zu navigieren, während ich den Alpha-Wert getrennt verwalte. Die "setColor" -Funktion funktioniert einwandfrei, aber die "manageAlpha" -Funktion scheint überhaupt nicht zu funktionieren. Mein Ziel ist es, meine AlphaVar auf den absoluten Wert einer Sinusfunktion in steigenden Schritten von PI/10 mit einem 0,15 Sekunden Intervall einzustellen. Ich kann dieses Problem nicht herausfinden! Bitte helfen Sie!

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

Das erste, was, um den absoluten Wert und sin-Funktionen verwenden zu verwenden, verwenden Sie Math.abs() und Math.sin():

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

Dann ist das andere Problem, dass die Werte in der backgroundCol Array aktualisiert wird nicht selbst wenn alphaVar geändert wird. Wenn Sie

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

der Wert alphaVar definieren, ist nicht definiert, so backgroundCol[0] die Zeichenfolge "rgba(255,192,192,undefined)", auch wenn der Wert von alphaVar Änderungen später.

Was Sie tun können, ist Alpha aus dem backgroundCol Array verlassen und fügen Sie es in, wenn Sie .css() anrufen.

So etwas wie:

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

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