javaScript Fade-In OnLoad

javaScript Fade-In OnLoad

本文关键字：OnLoad Fade-In javaScript      更新时间：2023-09-26

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

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

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

相关文章：