1
for (i = 0; i < 9; i++) { 
    setTimeout(function() {
        document.getElementById("debimg").style.opacity = opct;
        opct = opct + 0.1;
    }, 1000);
}

Пытаюсь сделать анимацию, чтобы при загрузке страницы постепенно проявлялся элемент, но почему то не выходит, через секунду сразу становится полностью непрозрачным

Lspewz
  • 87

1 Answers1

2

Все десять таймаутов выстрелят сразу, один за другим, через секунду после выполнения цикла.

for (i = 0; i < 9; i++) { 
    setTimeout(function() { ... }, 1000 * (i+1));
}

или

function increaseOpacity() {
  document.getElementById("debimg").style.opacity = opct;
  opct = opct + 0.1;
  if (opct <= 1)
    setTimeout(increaseOpacity, 1000);
}

increaseOpacity();

Почему это так работает?

Вы в цикле, не ожидая исполнения таймаутов, заказываете их 10 штук - происходит это практически одновременно, так как десять итераций выполнятся мгновенно. Все таймауты заказаны через секунду. Вот они все и выполнятся через секунду.