悬停时暂停动画 Jquery

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

Pause animation on hover Jquery

html

jquery

hover

jquery-animate