Javascript 淡入元素并运行回调

好的，我试过很多不同的方法。我正在尝试学习javascript，而不是总是求助于jQuery。我正在尝试创建类似的功能来淡入淡出元素（使用回调作为参数）

鉴于这一因素：

asdf

当我运行这个javascript（或类似的东西）时，我要么得到闪烁的效果（我认为它来自运行的

fadeIn

和

fadeOut

函数），要么只是让它淡入。当我尝试同时对多个元素执行此操作（在for循环中）时，会出现更多问题，但我猜“闭包”将是解决这个问题的答案。一次只做一件事

function setOpacity(element, value) {
    element.style.opacity = value/100;
    element.style.filter = 'alpha(opacity=' + value + ')';
}

function fadeIn(element, speed, callback) {
    if( ! speed ) { speed = 1000; }
    var speed = speed / 100;
    for (var i = 0; i < 100; i++) {
        setTimeout((function(i){ return function(){ setOpacity(element, i); } })(i), (i * speed));
    }
    if (callback && typeof(callback) === 'function') {
        setTimeout(function(){
            return function() {
                callback();
            }
        }, (100 * speed));
    }
}

function fadeOut(element, speed, callback) {
    if( ! speed ) { speed = 1000; }
    var speed = speed / 100;
    for (var i = 100; i > 0; i--) {
        setTimeout((function(i){ return function(){ setOpacity(element, i); } })(i), ((100 - i) * speed));
    }
    if (callback && typeof(callback) === 'function') {
        setTimeout(function(){
            return function(){
                callback();
            }
        }, (100 * speed));
    }
}

element = document.getElementById('something');
element.onclick = function() {
    fadeIn(element, 1000, function() {
        fadeOut(element, 1000, function() {
            // All done
        });
    });
}

函数setOpacity（元素、值）{
element.style.opacity=值/100；
element.style.filter='alpha（不透明度='+value+'）；
}
函数fadeIn（元素、速度、回调）{
如果（！speed）{speed=1000；}
var速度=速度/100；
对于（变量i=0；i<100；i++）{
setTimeout（（函数（i）{return函数（）{setOpacity（元素，i）；}}）（i），（i*速度））；
}
if（回调和类型化（回调）==“函数”）{
setTimeout（函数（）{
返回函数（）{
回调（）；
}
}，（100*速度）；
}
}
函数淡出（元素、速度、回调）{
如果（！speed）{speed=1000；}
var速度=速度/100；
对于（变量i=100；i>0；i--）{
setTimeout（（函数（i）{return函数（）{setOpacity（元素，i）；}}）（i），（（100-i）*速度））；
}
if（回调和类型化（回调）==“函数”）{
setTimeout（函数（）{
返回函数（）{
回调（）；
}
}，（100*速度）；
}
}
element=document.getElementById（'something'）；
element.onclick=function（）{
fadeIn（元素，1000，函数（）{
衰减（元素，1000，函数（）{
//全部完成
});
});
}

尝试使用，而不是：

---

一次启动101个计时器对浏览器来说不是那么友好，但是一个单独的时间间隔计时器可以自动停止也没什么大不了的。而且，100次迭代可能太高，15-20次可能就足够了；您可以在切换到

setInterval

后播放该数字，您可能会惊讶地发现，在不影响视觉性能的情况下，您可以将该数字设置得如此低。

更新：现在，出于动画目的，首选使用

requestAnimationFrame

而不是

setInterval

。

var timer, i = 0;
timer = setInterval(function() {
    if(++i == 100) {
        clearInterval(timer);
        callback();
        return;
    }
    setOpacity(element, i);
}, speed);