Question

我尝试使用JavaScript创建淡入和淡出功能，但它无法正常工作。请告诉我我做错了什么。我没有获得过渡效果。

var fade_in_btn  = document.getElementById('fade-in'),
    fade_out_btn = document.getElementById('fade-out'),
    fading_div   = document.getElementById('fading-div');

function sleep(milliseconds) {
    var start = new Date().getTime();
    for (var i = 0; i < 1e7; i++) {
        if ((new Date().getTime() - start) > milliseconds){
        break;
        }
    }
}

fade_out_btn.onclick = function(){
    for (var i=100; i >= 0; i--) {
        sleep(0010);
        opacity_function(i);
    }
}

fade_in_btn.onclick = function(){
    for (var i=1; i <= 100; i++) {
        sleep(0010);
        opacity_function(i);
    }
}

function opacity_function(opacity_value){
    fading_div.style.opacity = opacity_value / 100;
    fading_div.style.filter = 'alpha(opacity=' + opacity_value + ')';
    console.log(fading_div.style.opacity);
}

带有HTML的

Fiddle。

所有代码工作正常。但是从我的角度来看，问题是for ...循环不会在每次迭代后更新不透明度的值;它只更新最终值。

请帮我解决这个问题。

Answer 1

这是一个纯粹的JS答案，并没有使用requestAnimationFrame，但我选择放弃你的睡眠功能，因为这是一个奇怪的选择和不好的做法（而你的工作也没有。）请注意，JS中不能有 true sleep。）这有效：

fade_out_btn.onclick = function(){
    var i = 100; 
    var myint = setInterval(function(){
        opacity_function(i);
        i--; 
    if (i<0) clearInterval(myint);
       console.log(i);
    },10); //this is the number of ms between iterations of the codeblock in my setInterval function
}

[编辑：有些人推荐setTimeout。我认为没有必要，但如果你真的想使用setTimeout，我就是这样做的：

var i = 100; 

function fadeout(){
var myint = setTimeout(function(){
    opacity_function(i);
    i--; 
if (i>0) fadeout(); 
},10);
}

fade_out_btn.onclick = fadeout;

注意两件事：
1 - 我在函数之外删除了i的定义。你必须抓住你想要从函数外部递减的那个值，因为你的fadeout的起始值可能不总是100但是会被设置为不透明度的当前值，即{{{ 1}}。
2 - 我将回调绑定到onclick。

关于在fading_div.style.opacity * 100和setInterval之间进行选择：
setTimeout和setInterval都只是安排代码的执行。 setTimeout从每次 x ms开始计划事件，而一系列链式setInterval在 x ms中安排事件，然后再次执行，然后以x ms计划另一个事件。所以setTimeout有一点时间开销，因为实际时间间隔是setTimeout。如果执行一次所需的时间大于指定的时间间隔，则可能会出现使用x + (the time is takes to execute the codeblock once)的问题，但这不会影响像您这样简单的程序。见here
]

纯Javascript淡入淡出不工作

1 个答案: