jQuery animate()尽管stop()仍然成为香蕉 [英] jQuery animate() goes bananas despite stop()

问题描述

在完成SVG计时器后，我得到了一个在悬停时会展开的框:

I got this box that expands on hover after its SVG timer is done:

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

但是现在，如果您快速地徘徊很多次，它就会变成香蕉.为何将stop(true,true)放在每个animate()之前无法解决?

But right now it goes bananas if you hover on and off many times quickly. How come placing stop(true,true) before each animate() won't fix it?

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的超时作业排队.定时函数解析后，它将停止元素上的任何动画，但不会清除其他定时函数.

This function is queue a timeout job for each mouseenter. When the timed function resolves it will stop any animation on the element, but it will not clear other timed functions.

$('.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);
});

要解决此问题，您需要检查是否已设置超时，并先清除超时:

So to fix, you need to check if the timeout is already set, and clear it first:

$('.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()尽管stop()仍然成为香蕉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！