javascript - jquery animate が ie8 で完全に機能しない

Question

IE8を除くすべてのブラウザで問題なく動作しています。

IE8でマウスオーバーするとすべてのボックスが上がり、マウスを離れるとすべてのボックスが下がります。これはIE8でのみ発生します。

IE7 と IE9 は正常に動作しています。

js

var timeoutId;

$('.box').mouseenter(function () {
    var $this = $(this);
    if (!timeoutId) {
        timeoutId = window.setTimeout(function () {
            timeoutId = null;
            $this.stop().animate({
                marginTop: '-224px',
                height: '300px'
            })
            $this.find('.rotate-arrow').addClass('rotate');
            $this.find('.header-content-span').css('display', 'none');
        },500); 
    }
});
$('.box').mouseleave(function () {
    var $this = $(this);
    if (timeoutId) {
        window.clearTimeout(timeoutId);
        timeoutId = null;  
    }
    $this.stop().animate({
        marginTop: '0px',
        height: '77px'
    })
    $this.find('.rotate-arrow').removeClass('rotate');
    $this.find('.header-content-span').css('display', 'block');
});

html ( 3 ボックス)

<div class="box">
    <div class="box-heading bgc-cl1"></div>
    <div class="box-content"></div>
</div>

CSS

.box{
    float: left;
    width: 290px;
    height: 77px;
    margin: 0px 8px;
    overflow: hidden;
    cursor: pointer;
    -moz-box-shadow: 5px 5px 8px #888;
    -webkit-box-shadow: 5px 5px 8px #888;
    box-shadow: 5px 5px 8px #888;
    position: relative;
    z-index: 999;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: relative;
}