Question

我正在尝试使用JavaScript编写自己的动画。

我为fadeIn()编写了一个函数，如下所示，它会更改display属性，然后更改不透明度值。但它似乎没有奏效。

我做错了什么？

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一秒钟，你的循环运行10次，所以在这种情况下，它将是30秒，可能太慢。

我可能会坚持使用CSS转换，因为它们往往会在所有浏览器上呈现更好。

Answer 2

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

＆＃13;

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');

＆＃13;

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

＆＃13;

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

＆＃13;

如果您想让淡入淡出更快，请将800替换为更低的值，反之亦然。

Answer 3

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

因为html render和for循环使用相同的线程，所以当你执行for循环时，在函数完成之前你看不到任何变化。您必须使用从{html5引入的setTimeout或setInterval（或requestAnimationFrame），以便您可以使用控件更改页面上的属性：

您可以在代码段中看到一个示例，但使用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>

javascript中的fadeIn和fadeOut

4 个答案: