Come sparare un evento dopo 3 secondi di hovering

Question

Ho un div e voglio sparare un evento solo dopo che l'utente continua passa il mouse per 3 secondi. Il mio codice non funziona bene perché si attiva subito dopo il passaggio del mouse e non "aspetta".

Codice:

$(".inner_pic").mouseenter(function() { 
    setTimeout(function() { 
     alert('testing'); 
    }, 3000); 
}).mouseleave(function() { 
    alert('finish'); 
}); 

Answer 1

È necessario memorizzare timeout id da qualche parte e chiaro su mouseout. E 'comodo da usare proprietà data per salvare questo id:

$(".inner_pic").mouseenter(function() { 
 
    $(this).data('timeout', setTimeout(function() { 
 
     alert('testing'); 
 
    }, 3000)); 
 
}).mouseleave(function() { 
 
    clearTimeout($(this).data('timeout')); 
 
    alert('finish'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="inner_pic">PICTURE</div>

Answer 2

È possibile raggiungere questo obiettivo delay opzione:

Working demo

$('#elem').popover({ 
    trigger: "hover", 
    delay: {show : 3000, hide : 0} }); 

Answer 3

provare questo codice:

<div id='a' style="border:2px solid black" > 
    <h3>Hove On me</h3> 
    For 2000 milliseconds. You will get an alert. 
    </br> 
    </div> 

$(document).ready(function(){ 
    var delay=2000, setTimeoutConst; 
    $('#a').hover(function(){ 
     setTimeoutConst = setTimeout(function(){ 
      /* Do Some Stuff*/ 
      alert('Thank You!'); 
     }, delay); 
    },function(){ 
     clearTimeout(setTimeoutConst); 
    }) 
}) 

</script> 

DEMO:

http://jsfiddle.net/uhwzzu1u/1/

Answer 4

Acquista il codice qui sotto

var myVar; 
 
$("div#container") 
 
    .mouseover(function() { 
 
    myVar = setTimeout(function(){ alert("Hello"); }, 3000); 
 
    }) 
 
    .mouseout(function() { 
 
    clearTimeout(myVar); 
 
    });

div { 
 
    background: red; 
 
    margin: 20px; 
 
    height: 100px; 
 
    width: 100px; 
 
    display:block; 
 
    cursor: pointer; 
 
    } 
 
div:hover { 
 
    background: yellow; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"></div>

Answer 5

 
 
    var st; 
 
    $(".inner_pic").mouseenter(function(e) { 
 
     var that = this; 
 
     st = setTimeout(function() { 
 
      alert('testing'); 
 
     }, 3000); 
 
    }).mouseleave(function() { 
 
     clearTimeout(st);  
 
     alert('finish'); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="inner_pic"> 
 
    <h3>Picture Here - Hover me</h3> 
 
</div>

Answer 6

Dando per scontato che hanno un div con id di myelement, si può fare questo:

var divMouseOver; 
$('#myelement').mouseover(function() { 
    divMouseOver = setTimeout(function() { 
    alert("3 seconds!"); //change this to your action 
    }, 3000); 
}); 
$('#myelement').mouseout(function() { 
    if (divMouseOver) { 
    clearTimeout(divMouseOver); 
    } 
}); 

BTW, è una utile domanda di chiarimento: usando mouseenter e mouseover proprio qui: Jquery mouseenter() vs mouseover(). Considera questo quando scegli quale usare.