jquery - jQuery 动画完成在 Firefox 中不起作用

Question

console.log('1');
jQuery('#inner-content').animate({
    'width': jQuery('#inner-content-wrapper').width() + 'px'
}, {
    duration: 800,
    queue: false,
    complete: function(){
        console.log('2');
    }
});
console.log('3');

控制台输出Chrome v28：1,3,2

控制台输出Firefox v23 : 1,3 Animation works but complete is never executed, 这在 IE 10 中也不起作用

HTML

<div id="content">
    <div id="inner-content-wrapper" class="wrap clearfix">
        <div id="inner-content" class="wrap clearfix">
        </div>
    </div>
</div>

计算样式内容

box-sizing: border-box;
color: rgb(0, 0, 0);
display: block;
font-family: sans-serif;
font-size: 16px;
height: 243px;
line-height: 24px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 70px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
width: 1756px;

计算样式内部内容包装器

box-sizing: border-box;
color: rgb(0, 0, 0);
display: block;
font-family: sans-serif;
font-size: 16px;
height: 243px;
line-height: 24px;
margin-bottom: 0px;
margin-left: 378px;
margin-right: 378px;
margin-top: 0px;
max-width: 1000px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
width: 1000px;
zoom: 1;

计算样式内部包装器

background-color: rgba(255, 255, 255, 0.85098);
box-sizing: border-box;
color: rgb(0, 0, 0);
display: block;
float: right;
font-family: sans-serif;
font-size: 16px;
height: 243px;
line-height: 24px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
max-width: 1000px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 50px;
position: relative;
width: 1000px;
zoom: 1;