Question

for(i=100;i>=0;i--){
    icon.style.filter="alpha(opacity=0)";
}

这是我的for循环...我希望每次循环完成1循环它应该等待或睡觉100millisec所以它可以给fadding效果....

Answer 1

你应该调用setTimeout，它会在给定的延迟后执行一个函数。

例如：

function fadeOut(i) {
    i = i || 100;
    icon.style.filter  = "alpha(opacity=" + i + ")";
    icon.style.opacity = i / 100;

    i--;
    if (i > 0)
        setTimeout(function() { fadeOut(i) }, 100);    //Call fadeOut in 100 milliseconds
}

您也可以拨打setInterval，这将继续致电该功能，直到您拨打clearInterval 例如：

function fadeOut() {
    var i = 100;
    var timer = setInterval(function() {
        icon.style.filter  = "alpha(opacity=" + i + ")";
        icon.style.opacity = i / 100;
        i--;
        if (i <= 0)
            clearInterval(timer);
    }, 100);
}

您可以使用jQuery library更轻松地完成此操作，如下所示：

$(icon).fadeOut();

Answer 2

John Resig编写了非常酷的JavaScript函数，用于淡入淡出（稍微编辑）：

function fadeOut(elem, time)
{

 var t = time / 100;

 var c = 0;

 for (var b = 100; b >= 0; b -= 5)
 {

  c +=5;

  (function(){
   var pos = b;

   setTimeout(function(){

    setOpacity(elem, pos);
   }, ((c + 1) * t));
  })();
 }

}

function fadeOut(elem, time)
{
 show(elem);

 var t = time / 100;

 var c = 0;

 for (var b = 100; b >= 0; b -= 5)
 {

  c +=5;

  (function(){
   var pos = b;

   setTimeout(function(){

    setOpacity(elem, pos);
   }, ((c + 1) * t));
  })();
 }

}

function show(elem)
{

 elem.style.display = '';
}

function setOpacity(elem, level)
{
 if (elem.filters)
 {
  elem.style.filters = 'alpha(opacity=' + level + ')';
 }
 else
 {
  elem.style.opacity = level / 100;
 }
}

然后你会像：

一样使用它

var el = document.getElementById("#element");

fadeIn(el,1000); //Fade in over 1 second
fadeOut(el,1000); //Fade out over 1 second

编辑：

使用jQuery会更容易，但你会学习如何使用普通的JavaScript

$("#element").fadeOut();
$("#element").fadeIn();

我希望在运行每个循环时延迟100毫秒

2 个答案: