Introduction
I came across the need to detect and delay a hover before executing a function. The page was full of images, and when hovered over, would create an AJAX request to the server and display in a popup.
A Quick Example
Here is an example on how to achieve it.
$('img.expand').bind({ mouseover: function() {
obj = $(this);
jQueryTimeout = setTimeout(function() {
$.post('/target-uri',
{ 'attribute1':obj.attr('title'), 'attribute2':obj.attr('href') },
function(response){
console.log(response);
},
'json' );
},
2000);
},
mouseleave: function() {
clearTimeout(jQueryTimeout);
}
});
Demo
In the demo, there is a link, 'here', and if you hover over it for 2 seconds, it will display the title attribute in the input text field below.
This is a demo. Hover here:
Demo Code
<script>
$(document).ready(function(){
$(document).ready(function(e) {
mouseover: function() {
obj = $(this);
jQueryTimeout = setTimeout(function() {
$('.demo-target').val(obj.attr('title'));
}, 2000);
},
mouseleave: function() {
clearTimeout(jQueryTimeout);
}
});
});
