jQuery animations and Internet Explorer bugs

I had to create a smooth slide effect on two boxes using jQuery and its animate() method. The basic HTML structure is as follows:

<div id="container">

    <div id="box-a"></div>
    <div id="box-b"></div>

</div>

And here are the attached styles:

#container {
 width: 300px;
 height: 200px;
 background: #ccc;
 position: relative;
 top: 12px;
 overflow: hidden;
}

#box-a {
 width: 300px;
 height: 200px;
 float: left;
 position: relative;
 background: orange;
}

#box-b {
 width: 0px;
 height: 200px;
 float: left;
 position: relative;
 background: gray;
}

Also the related jQuery code is pretty straightforward:

$(document).ready(function() {

    $('#run').click(function() {
    
        $('#box-a').animate({position: 'absolute', left: '0px', width: '0px'}, 'fast'); // IE8- can't handle position: absolute here
        $('#box-b').animate({width: '300px'}, 'fast');
 
 return false;
    
    
    });


});

To create our sliding effect we first reduce the width of the first box to 0 and then we set the width of the second box to a given length. Notice that the first box has been absolutely positioned. That's the tricky part for Internet Explorer 8 and lower: it can't handle the vertical offset of the first box and return a JavaScript error (error code 0). Simply remove the declaration position: absolute and you get the desired result even on IE. You can see a live test here.