CODEWITHSUNDEEP
javascriptjqueryjquery-animate
Shniper
Shniper

Reputation: 854

Simple .animate with jquery

For some reason every time I try to implement jquery into my code it doesn't work. I know the basics of writing jquery and look up what I'm trying to do but apparently can never get it right even if my code is exactly similar to an online example.

All I am trying to do here is make #time slide down from off of the screen to it's normal position on page load. I tried .slideDown and .animate (top)

<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/

Upvotes: 0

Views: 32

Answers (2)

bohuss
bohuss

Reputation: 336

please see working solution here:

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

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

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

Upvotes: 1

Hemal
Hemal

Reputation: 3760

FIDDLE

There was some syntax error in your script, also you forgot position in css.

SCRIPT

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

CSS

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

Upvotes: 1

Related Questions