CODEWITHSUNDEEP
jquerycssjquery-animate
Ivar
Ivar

Reputation: 4392

jQuery animation fails in all browsers except Firefox

This problem is hard to explain, so I'll provide the code first and then, while describing the problem the best I can, I'll assume that you've compared the result in Firefox and any other browser.

Code: http://jsfiddle.net/MEckv/ (click on the big box to start)

For some reason it seems like the boxes' left position are reset before they pop up, making it feel like they're just looping at the left side while the right box just changes color. This issue doesn't occur in Firefox, though.

Have I done something crazy in the code?

Thank you in advance!

Upvotes: 1

Views: 89

Answers (2)

Chris
Chris

Reputation: 26878

The issue is that you're specifying right: 0px; then trying to animate to a specific left. Apparently Firefox knows how to handle that, but other browsers don't seem to.

The solution is to convert your left constants to right ones or find the actual left values (using jQuery's .offset().left) and style your boxes with them so that the browser knows how to animate (only the second method seemed to work perfectly). Here's a working little demo: little link.

I hope that helped!

Upvotes: 2

davidbuzatto
davidbuzatto

Reputation: 9424

I already have a similar problem. It seems that Firefox sets left, top, etc., properties to 0 when they are not present and we use them, for example, to animate left: 100 to left: 0 or to compare some draggable div top to another div (where top was not specified). So, just try to set default values do left, top, etc., when you need to use them. It seems that we cannot assume that these values will initialized with default values (like 0) in other browsers than Firefox.

Upvotes: 0

Related Questions