fadeIn и fadeOut в javascript

Question

Я пытаюсь написать свои собственные анимации с помощью JavaScript.

Я написал функцию для fadeIn(), как показано ниже, это изменяет свойство отображения, за которым следует изменение значения непрозрачности. Но, похоже, это не работает.

Что я делаю неправильно?

function fadeIn(obj, defDisp) { 
    obj.style.opacity = 0; 
    obj.style.display = defDisp; 
    var opVal = 0; 
    while (opVal < 1) { 
     obj.style.opacity = opVal; 
     opVal += 0.1; 
    } 
} 

defDisp = Значение по умолчанию для отображения собственности

Answer 1

Без временного интервала, это, вероятно, выполнить слишком быстро для вас, чтобы увидеть его. Цикл while без функции тайм-аута будет выполняться намного меньше секунды, и вы не увидите, что это произойдет. Это как просить компьютер считать до 10, он сделает это менее чем за миллисекунду.

Попробуйте использовать SetTimeout

http://www.w3schools.com/jsref/met_win_settimeout.asp

while(opVal < 1) { 
    setTimeout(function(){ 
     obj.style.opacity = opVal; 
     opVal += 0.1; 
    }, 3000); 
} 

Alter таймер (3000 в данном случае) к чему-то, что делает ваш выцветанию работу за вас. Каждые 1000 - одна секунда, и ваш цикл работает 10 раз, поэтому в этом случае это будет 30 секунд, вероятно, слишком медленно.

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

Answer 2

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

function fadeIn(obj, defDisp) { 
 
    obj.style.opacity = 0; 
 
    obj.style.display = defDisp; 
 
    var last = +new Date(); // Keep track of the time to calculate the opacity 
 
    var fadeStep = function() { 
 
     obj.style.opacity = +obj.style.opacity + (new Date() - last)/800; 
 
     last = +new Date(); 
 

 
     if (+obj.style.opacity < 1) { 
 
      setTimeout(fadeStep, 16); 
 
     } 
 
    }; 
 
    fadeStep(); 
 
} 
 

 

 
var el = document.getElementById('box'); 
 

 
fadeIn(el, 'block');

#box{ padding: 1em; background: #009afd; color: #ffffff; display: none; }

<div id="box">Hello</div>

Если вы хотите, чтобы увядает быстрее, заменить 800 ничем ниже и наоборот.

Answer 3

var el = document.getElementById('fadein'); 
 

 
fadeIn(el); 
 

 
function fadeIn(ele, defDisp) { 
 
    
 
       ele.style.opacity = 0; 
 
       ele.style.display = defDisp; 
 
       var opVal = 0; 
 
    
 
       var t = setInterval(function(){ 
 
        if(opVal >= 1){ 
 
         clearInterval(t); 
 
        } 
 
        ele.style.opacity = opVal; 
 
        opVal += 0.1; 
 
       }, 100); 
 
}

#fadein{ background: #ccc; border:1px solid #ddd; padding: 10px }

<div id="fadein">Hello</div>

Answer 4

Поскольку HTML визуализации и для цикла использовать ту же нить, поэтому, когда вы делаете для-петли, вы не можете увидеть никаких изменений до функции полной. Вы должны использовать setTimeout или setInterval (или requestAnimationFrame, который вводится с html5), так что браузер может иметь контроль, чтобы изменить свойства на странице:

Вы можете увидеть пример из сниппета, хотя второе, что использование a setTimeout быстрее, чем первый, который использует for loop, первый не изменит свой цвет, поскольку браузер не может изменить цвет во время for-loop.

И если вы решите использовать requestAnimationFrame, как и у фрагментов, вы можете иметь гладкую анимацию, а время также можно точно контролировать.

function fadeIn() { 
 
    this.style.opacity = 0; 
 
    this.style.display = 'block'; 
 
    var opVal = 0; 
 
    console.time("count"); 
 
    while(opVal < 1) { 
 
     this.style.opacity = opVal; 
 
     opVal += 0.000001; 
 
    } 
 
    console.timeEnd("count"); 
 
} 
 

 
// Accept target as the target to apply anim, time is total anim time in ms. 
 
function fadeInAlt(target, time) { 
 
    var opacity = 0; 
 
    var last = window.performance.now(); 
 
    console.time("count2"); 
 
    target.style.opacity = opacity; 
 
    target.style.display = 'block'; 
 
    var fadeInFunc = function(timeStamp) { 
 
     if (opacity < 1) { 
 
      // Define the change by passed time. 
 
      var timePassed = timeStamp - last; 
 
      opacity += timePassed/time; 
 
      target.style.opacity = opacity; 
 
      last = timeStamp; 
 
      requestAnimationFrame(fadeInFunc); 
 
     } else { 
 
      console.timeEnd("count2"); 
 
      return; 
 
     } 
 
    }; 
 
    requestAnimationFrame(fadeInFunc); 
 
} 
 

 
var div = document.getElementById('test'); 
 
div.onclick = fadeIn; 
 

 
var div2 = document.getElementById('test2'); 
 
div2.onclick = function() { 
 
    fadeInAlt(this, 3000); 
 
};

#test { 
 
    background-color: red; 
 
    width: 30px; 
 
    height:30px; 
 
} 
 

 
#test2 { 
 
    background-color: blue; 
 
    width: 30px; 
 
    height:30px; 
 
}

<div id="test"></div> 
 
<div id="test2"></div>