Переключить вместо того, чтобы просто появиться?

Question

Переключить вместо того, чтобы просто появиться?

0

Я использую приведенный ниже код, чтобы отображать уведомление сверху, но оно просто появляется из ниоткуда. Я бы хотел, чтобы он прокручивался вниз, подобно переключателю, одновременно отбрасывая все содержимое в div ниже него.

Привет, Javascript

<script>

window.onload = function() {
    setTimeout(function() {
        document.getElementById('top').style.display = 'block';
    }, 10000);
}

</script>

HTML:

<div id="top">
    <p>content here</p>
</div>

Joe Bobby 04 окт. 2013, в 09:16

Источник

Теги:

javascript

jquery

html

2 ответа

0

У вас есть этот вопрос с меткой jQuery, и для этого есть прямая функция jQuery прямо, так что вот эта версия:

$(function(){
  setTimeout(function(){
    $('#top').slideDown();
  }, 10000);
});

http://api.jquery.com/slideDown/

Если вы хотите сделать это в простом javascript, я бы рекомендовал использовать переходы CSS3 вместо того, чтобы изменять атрибуты, такие как display или попытку выполнить анимацию вручную.

Пример этого метода с использованием CSS3 и max-height можно найти здесь: http://davidwalsh.name/css-slide

Затем вы должны использовать javascript для добавления и удаления классов для переключения желаемого состояния, анимация будет выполняться для вас переходом CSS3.

ctcherry 04 окт. 2013, в 04:42

Ещё вопросы

Arun P Johny · Accepted Answer · 2013-10-04T03-56-00.000Z

Используйте .slideDown() вместо изменения свойства отображения для блокировки

window.onload = function () {
    setTimeout(function () {
        $('#top').slideDown()
    }, 10000);
}