jquery animate() IE9 and chrome - strange bahaviour! - jquery-animate

Question

Please look at this page here.
This is a really straightforward bit of jquery animate() that animates the title text up to the top of page - that's all!
In FF and Opera it's perfect.
In IE9 it jumps first to the bottom of the page and then animates up.
In Chrome it jumps to the top of the page and then animates down!
wtf!
The jquery call is:
$(function(){
$('#name_holder').click(function(){
$('#name_holder_wrap').animate(
{top: '75px'}
, 500
, 'swing'
, function() {
$('#name_holder').attr({"style": 'cursor:default'});
}
);
});
});
and here's the css for the elements involved:
#name_holder_wrap {
padding: 0px;
width: 100%;
position: absolute;
height: auto;
top: 45%;
}
#name_holder {
padding: 0px;
width: 600px;
height: auto;
text-align: center;
margin-right: auto;
margin-left: auto;
display: block;
cursor: pointer;
}
(Sorry, I haven't quite got my head round how to insert code into these posts properly - can't get those closing curly braces to include in the code block - I am trying!)
So, I'd really appreciate any pointers on this - i've been wrestling with it for some hours now and really need to get on!
Many thanks in advance!
Scott

Answer 1

Works fine for me in IE9 for me too, but a fix for Chrome would be to animate to a percent value instead of pixels:
$(function(){
$('#name_holder').click(function(){
$('#name_holder_wrap').animate(
{top: '15%'}
, 500
, 'swing'
, function() {
$('#name_holder').attr({"style": 'cursor:default'});
}
);
});
});
If that dosen't work, you could change the percent value in the css, maybe with help of some javascript.

Answer 2

The problem here is the combination of CSS and JQuery, which need to be correct in order for both IE and Chrome to work as you would hope.
Here's how I have things set up and it worked fine.
.object_to_be_animated {
position: absolute;
left: 0;
top: 96px;
width: 259px;
height: 85px;
background: url(...) left top repeat; }
The important thing here is that I have absolute positioned my element using TOP, not bottom.
I then structured my Jquery like so
function slide_up() { $(this).children(".overlay").animate({top: '-=51px'}); }
function slide_down() { $(this).children(".overlay").animate({top: '+=51px'}); }
$(".rolloverLink").hoverIntent(slide_up,slide_down);
Remember to use the same units with your CSS and JQuery, I'd recommend using pixels as it keeps things precise. Don't mix em, px, %.
This should hopefully fix the issue