Jak dodać opóźnienie do przesuwania myszy jquery?

Question

mam kilka zdjęć na jednej stronie i używam następujących aby wyzwolić zdarzenie:

$('.img').on('mouseover', function() { 
//do something 

}); 

Czy istnieje jakiś sposób, aby dodać opóźnienie takie, że gdy użytkownik najedzie na może 1 sekundę, a następnie go robi "// coś" lub faktycznie uruchamia zdarzenie "mouseover"?

Answer 1

Można użyć setTimeout

var delay=1000, setTimeoutConst; 
    $('.img').on('hover', function() { 
     setTimeoutConst = setTimeout(function(){ 
       //do something 
     }, delay); 
    }, function(){ 
     clearTimeout(setTimeoutConst); 

     }); 

Answer 2

Użyj czasomierza i wyczyścić go, gdy mouseOut okrywać zostawiają ciągu 1000ms

var timer; 

$('.img').on({ 
    'mouseover': function() { 
     timer = setTimeout(function() { 
      // do stuff 
     }, 1000); 
    }, 
    'mouseout' : function() { 
     clearTimeout(timer); 
    } 
}); 

Answer 3

Można to zrobić za pomocą setTimeout wraz z clearTimeout Jeżeli użytkownik pozostawia za wcześnie:

var timer; 
var delay = 1000; 

$('#element').hover(function() { 
    // on mouse in, start a timeout 

    timer = setTimeout(function() { 
     // do your stuff here 
    }, delay); 
}, function() { 
    // on mouse out, cancel the timer 
    clearTimeout(timer); 
}); 

Answer 4

można użyć jQuery .Delay tak (nie testowane):

$("#test").hover(
    function() { 
     $(this).delay(800).fadeIn(); 
    } 
); 

http://api.jquery.com/delay/

Answer 5

szukałem czegoś takiego, jak dobrze, ale z opóźnieniem, jak również wtórnego. Wzięłam jedną z odpowiedzi tutaj i rozwinąłam ją na

Ten przykład pokazuje element div po X sekundach przesuwania kursora myszy i ukrywa go po X sekundach wycofania. Ale wyłącza się, gdy umieścisz kursor nad wyświetlanym elementem div.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<style type="text/css"> 
.foo{ 
    position:absolute; display:none; padding:30px; 
    border:1px solid black; background-color:white; 
} 
</style> 
<h3 class="hello"> 
    <a href="#">Hello, hover over me 
    <span class="foo">foo text</span> 
    </a> 
</h3> 


<script type="text/javascript"> 
var delay = 1500, setTimeoutConst, 
    delay2 = 500, setTimeoutConst2; 
$(".hello").mouseover(function(){ 
    setTimeoutConst = setTimeout(function(){ 
    $('.foo').show(); 
    },delay); 
}).mouseout(function(){ 
    clearTimeout(setTimeoutConst); 
    setTimeoutConst2 = setTimeout(function(){ 
    var isHover = $('.hello').is(":hover"); 
    if(isHover !== true){ 
     $('.foo').hide(); 
    } 
    },delay2); 
}); 
</script> 

Working example