文章/答案/技术大牛

发布

社区首页 >问答首页 >纯JavaScript中的淡入和淡出

问纯JavaScript中的淡入和淡出
EN

Code Review用户

提问于 2011-12-30 15:55:34

回答 2查看 76.6K关注 0票数 14

我决定建立我自己的淡入淡出功能，因为这是我所需要的页面。

请评论一下我能做得更好的事情。

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>

<body>
        <div>
        <span id="fade_in">Fade In</span> | 
        <span id="fade_out">Fade Out</span></div>
        <div id="fading_div" style="display:none;height:100px;background:#f00">Fading Box</div>
    </div>
</div>

<script type="text/javascript">
// global varibles
var done = true,
    fading_div = document.getElementById('fading_div'),
    fade_in_button = document.getElementById('fade_in'),
    fade_out_button = document.getElementById('fade_out');

function function_opacity(opacity_value, fade_in_or_fade_out) { // fade_in_or_out - 0 = fade in, 1 = fade out
    fading_div.style.opacity = opacity_value / 100;
    fading_div.style.filter = 'alpha(opacity=' + opacity_value + ')';
    if (fade_in_or_fade_out == 'in' && opacity_value == 1) {
        fading_div.style.display = 'block';
    }
    if (fade_in_or_fade_out == 'in' && opacity_value == 100) {
        done = true;
    }
    if (fade_in_or_fade_out == 'out' && opacity_value == 1) {
        fading_div.style.display = 'none';
        done = true;
    }
}

// fade in button
fade_in_button.onclick = function () {
    if (done && fading_div.style.opacity !== '1') {
        done = false;
        for (var i = 1; i <= 100; i++) {
            setTimeout("function_opacity(" + i + ",'in')", i * 5);
        }
    }
};

// fade out button
fade_out_button.onclick = function () {
    if (done && fading_div.style.opacity !== '0') {
        done = false;
        for (var i = 100; i >= 1; i--) {
            setTimeout("function_opacity(" + i + ",'out')", (i - 100) * -1 * 5);
        }
    }
};
alert (test);
</script>
</body>
</html>

javascript

animation

回答 2

Code Review用户

回答已采纳

发布于 2011-12-30 19:15:17

只是一些关于JavaScript代码的一般性注释:我提取出一个setOpacity函数，并创建一个fadeOut和一个fadeIn函数。

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

function fadeOut(opacity) {
    setOpacity(opacity);
    if (opacity == 1) {
        fading_div.style.display = 'none';
        done = true;
    }
}

function fadeIn(opacity) {
    setOpacity(opacity);
    if (opacity == 1) {
        fading_div.style.display = 'block';
    }
    if (opacity == 100) {
        done = true;
    }
}

...
setTimeout("fadeIn(" + i + ")", i * 5);
...

它消除了in和out魔术常数以及检查它们值的许多条件。

使用像opacity_value这样的变量名称后缀看起来有点多余(因为变量存储值)，所以我重新命名了它们。function_opacity函数也是如此。

我也更改了第二个for循环，以减少算术操作，我认为以下内容更容易读懂：

for (var i = 1; i <= 100; i++) {
    setTimeout("fadeOut(" + (100 - i) + ")", i * 5);
}

票数 6

Code Review用户

发布于 2011-12-30 22:13:27

这只是@palacsint回答的一个扩展。您不应该将字符串传递给setTimeout，它使用的是eval，这是低效和不安全的。你应该传递一个函数。

问题是，在for循环中，i会发生变化，所以您必须使用闭包。

别这么做：

for (var i = 100; i >= 1; i--) {
   setTimeout("function_opacity(" + i + ",'out')", (i - 100) * -1 * 5);
}

相反，请做：

for (var i = 100; i >= 1; i--) {
   setTimeout((function(x){
      return function(){
         function_opacity(x, 'out')
      };
   })(i), (i - 100) * -1 * 5);
}

这看起来可能有点乱。我建议声明一个单独返回函数的函数。

function call_opacity(i, d){
    return function(){
      function_opacity(i, d);
    };
}

那就做：

for (var i = 100; i >= 1; i--) {
   setTimeout(call_opacity(i, 'out'), (i - 100) * -1 * 5);
}

票数 4

页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://codereview.stackexchange.com/questions/7315

复制

相似问题

问纯JavaScript中的淡入和淡出
EN

回答 2

Code Review用户

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问纯JavaScript中的淡入和淡出EN

回答 2

Code Review用户

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问纯JavaScript中的淡入和淡出
EN