javascript fade in fade out не работает

Question

Кто-нибудь знает, почему мой javascript не работает КАК ЭТО? Ниже приведен код:

function load(){ 
    function fadein(){ 
     var op = document.getElementsByClassName("load_1")[0] 
     op.style.opacity = 0; 
     function animate(){ 
      if ((op.style.opacity = op.style.opacity + 0.01) < 1){ 
       alert("Hello") 
       requestAnimationFrame(animate); 
      } 
     } 
     animate() 
    } 
    fadein() 
} 

load() 

Answer 1

Я знаю, что вы сказали, что вы хотели, чтобы работать именно так, как это так, поэтому я прошу прощения, если мои предложения идут немного за борт, но я не мог заставить его работать так, как у вас есть для следующих причин:

1. Вложенные функции не является хорошей практикой, по крайней мере, в JavaScript, на мой взгляд, как это много раз потому что это не работает, так как, кажется, делать в вашем случае. Говоря, вы можете определить их отдельно и вызвать их внутри своей функции загрузки.
2. определение var op будет работать лучше, если оно объявлено снаружи, поэтому это общая переменная. В противном случае я бы предложил передать его как аргумент между функциями. Зависит от того, на что вы нацеливаетесь в дальнейшем, но так, как сейчас, я заметил, что это мешает другой функции видеть его иногда
3. Наконец, но, возможно, самое главное, op.style.opacity не является числом , вы можете передать номер прямо к нему, но добавление числа к нему не будет работать, поскольку он получает синтаксический анализ для того, чтобы строка стала CSS.

Подтвердите код предложения. Он имеет несколько изменений, но, надеюсь, не слишком много, как вы хотели.

var op = document.getElementsByClassName("load_1")[0]; 
load(); 
function load(){ 
    fadein(); 
    animate(); 
} 
function animate(){ 
     var opac = parseFloat(op.style.opacity); 
     opac = opac+0.1; 
     op.style.opacity = opac; 
     if ((op.style.opacity) < 1){ 
      alert("Hello"); 
      requestAnimationFrame(animate); 
     } 
} 
function fadein(){ 
    op.style.opacity = 0.1; 
}