I have a problem with setting a delay between the execution of code, in which I want to change the css attributes of four different elements. The code down below works without erros and the style changes but the elements style changes at the same time without any delay. So the delay doesnt really work. I know the code doesnt look good but I tried it in all ways possible but delay never worked. I tried it with a for loop while using the variable of the loop inside the function of the setTimout function but it didnt work. Any suggestions?
Thank you!
if (mainHelp > mainareaHelp) {
var x = 0;
A(x);
}
function A(x) {
test[x].setAttribute('style', "opacity: 1; transform: translateY(0%);");
x++;
setTimeout(B(x), 4000);
}
function B(x) {
test[x].setAttribute('style', "opacity: 1; transform: translateY(0%);");
console.log("ZAHL: " + x);
x++;
setTimeout(C(x), 10000);
}
function C(x) {
test[x].setAttribute('style', "opacity: 1; transform: translateY(0%);");
x++;
setTimeout(D(x), 10000);
}
function D(x) {
test[x].setAttribute('style', "opacity: 1; transform: translateY(0%);");
}