CODEWITHSUNDEEP
jqueryanimation
ocat
ocat

Reputation: 201

jQuery animation issue chrome vs mozilla

I am having an issue with a div that I am trying to animate. In mozilla when I run the code below I get an animation of the #nav div from the bottom of the page to about the top of the page. When I run the same code in chrome or safari it jumps to the top of the browser window and animates down 52px. Do you know why this is happening?

 $("#nav").animate({'top': 52}, 2000);

The #nav div

position:absolute;
bottom:-70px;

1st onclick event triggers its partial appearance from the bottom of the page. 2nd onclick triggers it to move from the bottom of the page to the top of the page.

Upvotes: 1

Views: 121

Answers (1)

James Montagne
James Montagne

Reputation: 78630

This seems to be due to the fact that you are animating the top of an element which did not have a top set. You can work around this by setting the top right before the animate:

var $this = $("#nav");

$this.css("top", $this.position().top);
$(this).animate({"top": 0}, 1000);

http://jsfiddle.net/zmrC5/

EDIT: The difference is due to the different results the browsers return when checking the top value of an element which does not have top set. You can see this from this fiddle:

http://jsfiddle.net/zmrC5/1/

Chrome will return "auto" whereas firefox returns the calculated top value.

Upvotes: 2

Related Questions