I am trying to do something that I thought was very simple, shrink the height of the welcome page to 0 on some event.
At first I wanted to grow the welcome page, ended up using this code:
for (let i = 0; i < 100; i++) {
setTimeout(
function() {
let test =$('#bg0');
test = test.css("height", i + "%");
}, 10 * i
);
}
I actually needed to ask here, on the forums for help on the last bit of code for that…
It worked, and I thought I understood it.
I now changed my mind and want to shrink the welcome page rather than grow it.
So I modified it to this:
for (let i = 100; i > 0; i--) {
setTimeout(
function() {
let test =$('#bg0');
test = test.css("height", i + "%");
}, 10 * i
);
}
Much to my dismay it did the exact same thing that the previous code did- grow the welcome page.
So I broke down the block of code by putting console.logs everywhere and it turns out that the settimeout isn’t running until the loop condition breaks … i.e. i>0
this is aggravating because from what I have read and been taught the for loop initializes, checks the condition, runs the code within its bracket then increments/decrements the variable.
So why is the vudoo happening and what is the reasoning/explanation?
For my modified code the for loop starts decrementing from 100 but for some reason when the loop condition breaks, the variable i is set to 0 and not 100 in my function, which is why my modified code won’t shrink the welcome page.
Sorry for the book, and I would immensely appreciate assistance on this!
for (let i = 100; i > 0; i--) {
console.log('pre timeout')
console.log(i)
setTimeout(
function() {
console.log('in function');
console.log(i);
let test =$('#bg0');
test = test.css("height", i + "%");
}, 10 * i
);
console.log('post timeout')
console.log(i)
}