setInterval выполняется только один раз

Question

У меня возникают проблемы с функцией setInterval. Он выполняется, но только один раз.

function show(el){ 
    el.style.opacity = 0; 
    el.style.display = "block"; 
    showingInterval = window.setInterval(function() { 
      el.style.opacity += 0.001; 
      if(el.style.opacity == 1) { 
       alert("done"); 
       clearInterval(showingInterval); 
      } 
     }, 1); 
} 

Функция show(el) не является проблемой. Он изменяет непрозрачность до 0 и отображает до "block" просто отлично. Функция интервалов запускает однократное изменение непрозрачности элемента до 0.0001. Он остается в этом состоянии и больше не меняется.

Спасибо за помощь!

Answer 1

Первая проблема, Element.node.style не надежна. Чтобы проверить текущие состояния и значения, всегда используйте window.getComputedStyle(Node).

Вторая проблема, свойства css представлены в Строки, вы не можете работать с математическими операторами, такими как +=.

el.style.opacity = parseFloat(getComputedStyle(el).opacity) + 0.001; 

Answer 2

Проблема здесь состоит в том, что += в вашем случае это не арифметическая операция сумма, но конкатенация. Это происходит потому, что оператор unary + выполняет конкатенацию строк, если хотя бы один из операндов является строковым типом. Значения DOMElement.style свойств всегда строки, поэтому в Вашем случае увеличиваются значения непрозрачности выглядит следующим образом:

"0" + 0.001 // => "00.001" 

При применении этого значения в качестве нового opacity, браузера, так как это неверный формат, устанавливает его в «0» еще раз.

Все, что вам нужно сделать, это отличить el.style.opacity от номера. Например, с Number функции:

el.style.opacity = Number(el.style.opacity) + 0.01; 

Демо:http://jsfiddle.net/gvg31gd1/

Answer 3

здесь решение нужно объявить только одну переменную

ваш код не icreamenet значение Thats непрозрачности, почему я не был работать

var opacity = 0; 
function show(el){ 
el.style.opacity = 0; 
el.style.display = "block"; 
showingInterval = window.setInterval(function() { 
     opacity = opacity + 0.001; 
     el.style.opacity = opacity; 
     document.write(opacity) 
     if(el.style.opacity == 1) { 
      alert("done"); 
      clearInterval(showingInterval); 
     } 
    }, 1);