Question

我试图在加载页面时淡入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;
}

Answer 1

就我从代码中看到的那样，您忘记了首先将不透明度设置为零。如果元素从一开始就完全不透明，就不会有太多褪色。

Answer 2

如果你想在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元素的样式。请注意，当显示设置为无时，元素不会占用页面上的任何空间。然后当执行jQuery代码时，它将简单地淡入页面上的box2 div元素。很酷的是这个代码将在整个文档加载时执行（$ document）.ready（）），因此你可以从你的body标签中取出onload属性。我认为这是在JavaScript中执行此操作的最简单方法。

javaScript淡入OnLoad

2 个答案: