[jQuery] Internet Explorer 7 doesn't .animate() correctly.

[Simon]

Hey, so I'm having a very curious problem with IE and the animate
effect.

I have a page which shifts left and right when you click on a certain
part of it. When you hover over this section of the page it become
opaque, and the image that was visible behind it should no longer be
visible.

This is the basic HTML:

<div id="focusedpage">

   <div id="backgroundblue"></div>

   <div id="image">
   </div><!--end image-->

   <div id="centerpiece">
   </div><!--end centerpiece-->

   <div id="blurb">
   </div><!--end blurb-->
</div><!--focused page-->

So when you click on #image the entire #focusedpage shifts left x
amount of pixels. At the moment, #image is overlaying #backgroundblue,
both are the same size, but I shifted #image left -256 pixels to make
it align with #backgroundblue, so that they were exactly overlapping.
This is so that #image gets a blue tint when you hover over it (the
reason I can't do this with just a background color is because #image
has rounded corners).

the CSS is like this:

#image{
  z-index:1;
  opacity:0.6;
  filter:alpha(opacity=60);
  height:410px;
  display:inline;
  margin-left:-256px;
  position:relative;
  width:256px;
  float:left;
  background-image:url('../images/image.png');
}


#backgroundblue{
  margin-left:-112px;
  background-image:url('../images/blue.png');
  z-index:0;
  height:410px;
  display:inline;
  position:relative;
  width:256px;
  float:left;
}

The relevant javascript code that I'm using is:

window.focus = $("#focusedpage").css('marginLeft');
$("#image").click(function(){

                        if ((window.focus == '0px') || (window.focus == 
'-112px')){
                                $("#image").animate( { opacity: '1.0', 
marginLeft: '-256px' },
'slow');
                                $("#focusedpage").animate( {marginLeft: '112px' 
}, 'slow');
                                window.focus = '112px';

                        } else {
                                $("#image").animate( { opacity: '0.6' }, 
'slow');
                                $("#focusedpage").animate( {marginLeft: '0px' 
}, 'slow');
                                window.focus = '0px';

                        }

});

what the Javascript does is it checks whether the window is focused in
a certain position, and then depending on the position it animates the
#focusedpage to a relevant position.

The problem is, this works perfectly fine in Firefox and Safari, and
the code technically does what I want it to do in Internet Explorer 7,
however, during the animation, it apparently sets the position of the
#image (by ignoring the margin-left I think) shifts everything left,
and then jumps the image back into place. Sometimes it doesn't do the
last bit. I was wondering whether anyone could tell me why this
happened, and what I could do to augment this.

Thanks,

Simon