淡入淡出元素并运行回调

Question

好吧，我已经尝试了很多不同的方法。我试图学习JavaScript而不总是诉诸于jQuery。我正在尝试创建类似的功能来淡入一个元素，然后再使用（使用回调作为参数）。

鉴于此元素： <div id="something">asdf</div>

当我运行这个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 
     }); 
    }); 
} 

Answer 1

尝试使用setInterval代替setTimeout：

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

在启动101个定时器一次是不是友好的浏览器，但该站本身不是什么大不了的一个间隔定时器。此外，100次迭代可能过高，15-20次可能绰绰有余;在切换到setInterval后，您可以使用该号码进行游戏，但您可能会感到惊讶，您可以在不影响视觉表现的情况下获得多低。