fadeIn and fadeOut in 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);
}

改变定时器(在这个例子中是3000)，使你的淡出工作。每1000是1秒，你的循环运行10次，所以在本例中它将是30秒，可能太慢了。

我可能会坚持使用CSS过渡，因为它们倾向于在所有浏览器上呈现更好。

Answer 2

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 3

使用延迟后调用自身的函数

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 4

因为html渲染和for循环使用同一个线程，所以在执行for循环时，在函数完成之前看不到任何更改。您必须使用setTimeout或setInterval(或requestAnimationFrame从html5引入)，这样您的浏览器就可以控制更改页面上的属性:

您可以从代码片段中看到一个例子，尽管第二个使用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>