Question

我有一个计时器，我想在悬停时暂停，我希望它在鼠标离开时恢复。使用jquery，我实现了这一点，但每次鼠标离开元素时它都不能平稳恢复，如果我将它悬停几次，有时会完全崩溃。

这是代码

HTML

 <div class="progressBar">
 <div class="progressImg timer-blue" >
     <img src="https://labs.jellycode.pt/websites/PintoBrasil/wp-content/themes/JELLYCODE/images/timer-blue.png">
 </div>
 <div class="progressImg">
     <img src="https://labs.jellycode.pt/websites/PintoBrasil/wp-content/themes/JELLYCODE/images/timer-white.png">
 </div>
    </div>

JQUERY

var $progressBar = $('.timer-blue');

    function runIt() {
        $progressBar.animate({
            width: "50px",
        }, 5000, function() {
            $progressBar.css("width", "0")
            runIt();
        });
        $('.progressBar').hover(function() {
            $('.timer-blue').stop();
        }, function() {
            runIt();
        });
    }

    runIt();

JSFiddle

Answer 1

尝试this之类的内容。在我看来，它没有延迟。

var $progressBar = $('.timer-blue');

function runIt() {
    $progressBar.animate({
        width: "50px",
    }, 5000, function() {
        $progressBar.css("width", "0")
        runIt();
    });
}


    $('.progressBar').hover(function() {
        $('.timer-blue').clearQueue();
        $('.timer-blue').stop();
    }, function() {
        runIt();
    });
runIt();

在悬停Jquery上暂停动画

1 个答案: