Question

Currently I’m testing my webpage in different browsers for compatibility, however, I’m having an issue with my jQuery animate() in Chrome (using SRWare Iron) and IE.

I’m using the following code:

jQuery

$('.element').animate({top:"50px"}, 1400);

HTML

<h1 class="element">testing text slide</h1>

CSS

body {
    overflow: hidden;
}
h1 {
    margin: 0;
}
    .element {
    position: absolute;
    bottom: -1000px;
    left: 50px;
    font: bold 72px Arial, sans-serif;
}  

The issue I’m having, is that in Firefox (Aurora), element slides from the bottom of the screen (-1000px) up to the top anchor of 50px.

In Chrome and IE, what seems to be happening is that element is sliding from 0px on the top, down to the 50px from the top, so it’s very short. If I remove the jQuery animate for element, it’s positioned at -1000px (I think, it’s off the screen so I assume that’s where it is).

Does anyone have any ideas? The other elements I’m animating with it work properly in FF/IE/Chrome.

Answer 1

You should be consistently manipulating only one of top or bottom. Right now your CSS sets bottom and then your animation changes top. As the two are obviously not independent, you will be much more likely to get consistency if you set and manipulate only one of them. When you haven’t set a value for top, then the javascript animation is probably getting an inconsistent starting value for top that the animation will start from. It’s probably coming back as auto in some browsers and some numeric value in other browsers. You can bypass that whole inconsistency if you don’t rely on a value that you haven’t set.

Since your CSS sets bottom, I would suggest that you animate bottom also, not top.