暫停懸停動畫懸停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();