Question

我的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;
}

Answer 1

此函数为每个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);
});

jQuery animate（）尽管停止了香蕉（）

1 个答案: