jQuery的动画（）变为香蕉，尽管停止（）(jQuery animate() goes banan

我得到这个盒子，它的SVG计时器完成后悬停展开：

http://jsfiddle.net/frank_o/WwD5V/9/embedded/result/

但是，如果你在徘徊和关闭多次很快，现在它去香蕉。怎么来放置stop(true,true)每前animate()不会解决这个问题？

JS：

$('.wrapper').bind('mouseenter', function () {
    setTimeout(function () {
        $('.wrapper').stop(true,true).animate({
            width: '100%'
        }, 200);
    }, 2000);
}).mouseleave(function () {
    $('.wrapper').stop(true,true).animate({
        width: '120px'
    }, 200);
});

HTML：

<div class="wrapper">
    <div class="main"></div>
</div>

CSS：

.wrapper {
    height: 600px;
    width: 200px;
    overflow: hidden;
    border: 4px solid black;
    float: right;
}

此功能是排队每个的mouseenter超时工作。当计时的函数解析将停止元素上的任何动画，但它并不清楚其他定时功能。

$('.wrapper').bind('mouseenter', function () {
    setTimeout(function () {
        var $this = $('.wrapper');

        $this.stop(true,true).animate({
            width: '100%'
        }, 200);

        $this.find('.main').stop(true,true).animate({
            left: '150%'
        }, 200);
    }, 2000);
});

因此，要解决，你需要检查，如果超时已经设置，并且第一清除：

$('.wrapper').bind('mouseenter', function () {
    var timeoutHandle = $(this).data('timeout') || 0; 

    if (timeoutHandle > 0)
        clearTimeout(timeoutHandle);

    timeoutHandle = setTimeout(function () {
        var $this = $('.wrapper');

        $this.stop(true,true).animate({
            width: '100%'
        }, 200);

        $this.find('.main').stop(true,true).animate({
            left: '150%'
        }, 200);
    }, 2000);

    $(this).data('timeout', timeoutHandle);
});