0

我试图在页面加载后淡入 div，由于某种原因它不起作用，还有没有更好的方法来使用 JavaScript 做到这一点

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Fade In</title>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="main.css">
    <script src="main.js"></script>
</head>

<body onload="FadeIn('box2');">   
    <div id="box2">Content in Box2...</div>
</body>
</html>

.

function FadeIn(el2){
    var element2 = document.getElementById(el2);
    element2.style.transition = "opacity 1.0s linear 0";
    element2.style.opacity = 1;                
}

.

#box2{
    background:#9dceff;
    width:400px;
    height:200px;
}
4

2 回答 2

1

据我从代码中可以看出，您首先忘记将不透明度设置为零。如果元素从一开始就完全不透明，则不会有太多褪色。

于 2013-09-19T19:33:44.860 回答
1

如果您想在 JavaScript 中执行此操作，我的建议是使用例如 jQuery JavaScript 库（其他库也可以执行此操作，例如 Prototype、MooTools 或 Dojo），因为它可能更容易一些比使用纯 JavaScript 更具可读性。

只需将以下代码添加到您的页面：

在文档的头部调用来自 Google 的 jQuery 库，如下所示：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

并添加以下几行代码：

<script>
        $(document).ready(function(){
            $("#box2").fadeIn();
        });
</script>

并在您的 CSS 文档（main.css）中添加 display: none; 属性添加到 box2 div 元素的样式中。请注意，当 display 设置为 none 时，该元素不会占用页面上的任何空间。然后，当执行 jQuery 代码时，它将简单地淡入页面上的 box2 div 元素。很酷的是这段代码将在整个文档加载时执行 ($document).ready())，所以你可以从你的 body 标签中取出 onload 属性。我认为这是在 JavaScript 中执行此操作的最简单方法。

于 2013-09-19T19:43:23.273 回答