CODEWITHSUNDEEP
javascriptjquerycss
atinybeardedman
atinybeardedman

Reputation: 26

Can't animate div top property to 0px with jquery

I'm trying to get a div to animate to the top of the window with by setting the css top value to 0px and changing it's css property from relative to fixed (it's covering another div that is above it). The properties change but it doesn't animate to the top it just goes in one frame. I'd really like to to ease to the top rather than jump.

Here's a fiddle of it http://jsfiddle.net/sedickinson/d4c9u/

Code below

HTML

<html>
    <head>
        <style>
            #menu{
                position: relative ; background-color: black; color: white; 
                text-align: center; width:100%; z-index: 9
            }
            #space{height:20px; position: relative; z-index: 5}
        </style>
    </head>
    <body>
        <div id="space"> </div>
        <div id="menu">blah</div>
        <script>
            var menu = $("#menu");
            menu.css('position','fixed').delay(400);
            menu.animate({top: '0px'},1000);
        </script>
    </body>
</html>

Upvotes: 0

Views: 1081

Answers (3)

scf1001
scf1001

Reputation: 251

The problem is that before you change the position to fixed the element has no 'top' value set. It's set to auto. You could set it to the offsetTop value first, then change the position to fixed, then animate it, like this:

http://jsfiddle.net/d4c9u/5/

var menu = $("#menu");
menu.css({'top': menu.offset().top, 'position': 'fixed'})
    .delay(400).animate({top: '0'},1000);

Basically, you can't animate it from 'auto' to '0'.

Upvotes: 2

Tyler Rash
Tyler Rash

Reputation: 1173

http://jsfiddle.net/_mtr/LRa9Q/

Added a parent to #menu and #space and set #menu to position: absolute.

Upvotes: 0

CRABOLO
CRABOLO

Reputation: 8793

http://jsfiddle.net/d4c9u/1/

with those two lines commented out , it works fine.

I changed 1000 to 2000 and you can clearly see it animating.

var menu = $("#menu");
menu.css('position','fixed').delay(400);
//menu.css('top', '0px');
//menu.css('position', 'fixed');

menu.animate({top: '0px'},2000);

Upvotes: 0

Related Questions