Question

我想为后续的js代码创建一个循环。请帮帮我。

function fade90() { document.getElementById("myDiv").style.opacity="0.90"; setTimeout("fade80()", 100); }
function fade80() { document.getElementById("myDiv").style.opacity="0.80"; setTimeout("fade70()", 100); }
function fade70() { document.getElementById("myDiv").style.opacity="0.70"; setTimeout("fade60()", 100); }
function fade60() { document.getElementById("myDiv").style.opacity="0.60"; setTimeout("fade50()", 100); }
function fade50() { document.getElementById("myDiv").style.opacity="0.50"; setTimeout("fade40()", 100); }
function fade40() { document.getElementById("myDiv").style.opacity="0.40"; setTimeout("fade30()", 100); }
function fade30() { document.getElementById("myDiv").style.opacity="0.30"; setTimeout("fade20()", 100); }
function fade20() { document.getElementById("myDiv").style.opacity="0.20"; setTimeout("fade10()", 100); }
function fade10() { document.getElementById("myDiv").style.opacity="0.10"; setTimeout("hide()", 100); }

我写这个。它是否正确？如果没有，请解决此问题。

function cls_msg(){
    for (var i=1;i<10;i++)
    {
    setTimeout(document.getElementById("myDiv").style.opacity=100-(i*10), 100);
    }
}

由于

Answer 1

在回答您的实际问题之前，我会为您提供更合适的解决方案来解决您的褪色问题，因为您尝试过于复杂。

您应该只修改实际值并将其重新分配给样式，无需调用所有方法并重新查询DOM。

function fadeIn( node, v ) {
    node.style.opacity = v || 1;

    if( v < 1 ) {
        setTimeout( fadeIn.bind( null, node, v + 0.1 ), 25 );
    }
 }

function fadeOut( node, v ) {
    node.style.opacity = v || 1;

    if( v > 0 ) {
        setTimeout( fadeOut.bind( null, node, v - 0.1 ), 25 );
    }
}

这是完成任务的一种方法的一个非常基本的例子。您可以将其称为

fadeOut( document.getElementById("myDiv") );

如果不需要支持带有动画的旧浏览器，那么让浏览器/ css转换完成工作可能是一个更好的主意。这可能看起来像

function fadeIn( node ) {
    node.style.transition = 'all 400ms ease-in';
    node.style.opacity = 1;
}

function fadeOut( node ) {
    node.style.transition = 'all 400ms ease-in';
    node.style.opacity = 0;
}

请注意，您可能不仅要设置转换，还要设置所有特定的浏览器供应商前缀，例如 -ms-transition ， -moz-transition 等等，对于“不那么遗留”的浏览器也是如此。

要最终回答这个问题，您应该使用数组来循环遍历多个函数，这可能看起来像

[ fade90, fade80, fade70, fade60,
  fade50, fade40, fade30, fade20,
  fade10, hide ].forEach(function( method, i, arr ) {
      setTimeout(function() {
          if( typeof arr[ i+1 ] === 'function' ) {
              !i && method();
              setTimeout( arr[ i+1 ], 25 * i );
          }
      }, 25);
});

请注意，您也应该重新编写这些方法，那些不应该为自己调用setTimeout，也不应该重新查询目标节点。我只想给你一个我的方法的例子。

Answer 2

不确定你在问什么，但我可以建议一些更整洁的东西吗？

function fade(n, el) {
  el.style.opacity = n;
  n = n - 0.1;
  if (n.toFixed(1) > 0) {setTimeout(function() {fade(n, el);},100);}
  else {setTimeout(function() {hide(el);}, 100);}
}

function hide(el) {
  el.style.visibility='hidden';
}

然后最初打电话

fade(0.9, document.getElementById("myDiv"));

例如：http://jsfiddle.net/XY4yM/

为javascript代码创建一个循环

2 个答案: