javaScript Fade-In OnLoad

Question

javaScript Fade-In OnLoad

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;
}

Karish Karish 19 сен. 2013, в 22:02

Источник

Теги:

javascript

html

css

2 ответа

1

Если вы хотите сделать это в JavaScript, мое предложение будет состоять в том, чтобы использовать jQuery JavaScript-библиотеку (другие библиотеки тоже могут это сделать, например Prototype, MooTools или Dojo), потому что это может быть немного проще и, возможно, немного более читаемый, вместо использования обычного JavaScript.

Просто добавьте следующий код на свою страницу:

В заголовке вашего документа вызовите библиотеку jQuery из Google следующим образом:

<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; свойство для стиля вашего элемента box2 div. Обратите внимание, что когда на дисплее установлено значение none, элемент не займет места на вашей странице. Затем, когда выполняется jQuery-код, он просто исчезает в элементе box2 div на вашей странице. Самое интересное, что этот код будет выполняться при загрузке всего документа ($ document).ready()), поэтому вы можете взять атрибут onload из тега body. Я думаю, что это самый простой способ сделать это в JavaScript.

SineLaboreNihil 19 сен. 2013, в 18:05

Ещё вопросы

11684 · Accepted Answer · 2013-09-19T17-48-00.000Z

Насколько я вижу из кода, вы забыли установить непрозрачность на ноль в первую очередь. Если элемент полностью непрозрачен с самого начала, его не будет много, чтобы исчезнуть.