Div does not slide back up on click / JS

Question

I'm having a small problem, i cant seem to solve.

I'm having a problem with the functionality of my animated function. When the div is clicked, it slides perfectly down, but when i click again on the div, it won't slide back up.

Thats the code i use....

$("#menu").click(function () {
    if($(this).offset().bottom == -40) {
        $(this).animate({'bottom': '0px'}, 1000);
    }
    else {
        $(this).animate({'bottom': '-40px'}, 1000);
    } 

});

However, it works perfectly fine, when my div is positioned on top,left or right of my page, rather on bottom? Thats something i dont understand... but i must say, i'm rather new to Js.

I've set up a jsFiddle here... http://jsfiddle.net/JmLqp/438/

Any suggestions?

Thanks, B

Answer 1

Changed the JS to check for the div's bottom value, and animate from that. Fiddle

$("#menu").click(function () {
    if($(this).css('bottom') == '-40px') {
        $(this).animate({'bottom': '0px'}, 1000);
    }
    else {
        $(this).animate({'bottom': '-40px'}, 1000);
   }     
});

Answer 2

It looks like you aren't getting the right value out of $(this).offset().bottom. You could do this instead:

var status = "up"
$("#menu").click(function () {
    if(status == "up") {   
       status = "down"
        $(this).animate({'bottom': '100px'}, 1000);
    }
    else {
        $(this).animate({'bottom': '-30px'}, 1000);
         status = "down"
    } 

});