Create progress bar with jQuery hover ()

Question

Create progress bar with jQuery hover ()

Navigation

#1 by (1 votes)

1

I need to create a progress bar while my cursor is over an image. If the cursor exits, then I need the progress to be reset to repeat the process if the cursor returns to the top of the image. When I get to 100% I'm going to open a modal.

Any ideas?

html jquery html5 css progress-bar

asked by anonymous 01.12.2017 / 19:56

1 answer

error: invalid conversion from 'my_type *' to 'int' [-fpermissive] Is there any problem in using pygame.image.load () several times?

score 1 · Accepted Answer

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

/ p>

$(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'>