1

Preciso criar uma barra de progresso enquanto meu cursor estiver em cima de uma imagem. Se o cursor sair, então preciso que o progresso fique zerado para repetir o processo caso o cursor volte em cima da imagem. Quando chegar no 100% vou abrir um modal.

Alguma idéia?

1
  • 1
    JavaScript, se procurar na web vai encontrar vários exemplos desse tipo de interação. Commented 1/12/2017 às 19:09

1 Resposta 1

1

Pode utilizar a função hover() para obter o evento de quando o ponteiro do mouse entrar/sair do elemento:

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

1
  • 1
    Perfeito! Muito obrigado amigo! Commented 1/12/2017 às 19:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .