Create progress bar with jQuery’s Hover()

Question

I need to create a progress bar while my cursor is on top of an image. If the cursor leaves, then I need the progress to be reset to repeat the process if the cursor goes back over the image. When I get to 100% I’ll open a modal.

Any idea?

Answer 1

You can use the function hover() to get the event when the mouse pointer enters/exits the element:

$(function(){
  
  var interval,
      progress = $('progress'),
      INTERVAL_DELAY = 50;
  
  
  // "mouse in"
  progress.hover(function(){
  
    interval = setInterval(function(){
      progress.val(progress.val()+1);
      
      if(progress.val() === 100){
        console.log('Modal!');
        clearInterval(interval);
      } 
      
    }, INTERVAL_DELAY);
    
  // "mouse out"  
  }, function(){
  
    clearInterval(interval);
    progress.val(0);
    
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<progress min='0' max='100' value='0'>