Простой .animate с jquery

Question

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

Все, что я пытаюсь сделать здесь, это сделать #time сползать вниз от экрана до его нормальной позиции при загрузке страницы. Я попытался .slideDown и .animate (вверху)

<div id="time"> 
    <h1>Good Evening</h1> 
</div> 



#time { 
    width: 100%; 
    height: 50px; 
    background-color: #000; 
} 

#time h1 { 
    color: #D4AF37; 
    font-size: 38px; 
    font-family: 'Arimo', sans-serif; 
    font-weight: 700; 
    text-align: center; 
    letter-spacing: 5px; 
    font-style: italic; 
    margin-top: 0px; 
    line-height: 50px; 

} 

$(function() { 
     $('#time').animate({ 
     top: '50px'), 200 
     }); 
    }); 

https://jsfiddle.net/d025dsqb/

Answer 1

см рабочего раствора здесь:

https://jsfiddle.net/aq9hszmv/2/

$(function() { 
    $('#time').animate({ 
    top: '0px'}, 2000 
); 
}); 

#time { 
    width: 100%; 
    height: 50px; 
    background-color: #000; 
    top: -50px; 
    position: absolute; 
} 

Answer 2

FIDDLE

Существовал некоторые синтаксические ошибки в сценарии, и вы забыли position в CSS.

SCRIPT

$(document).ready(function() { 
     $('#time').animate({ 
     top: '50px'}, 2000 
    ); 
    }); 

CSS

#time { 
    width: 100%; 
    height: 50px; 
    background-color: #000; 
    position:absolute 
}