Enable hang event after a certain time
I would like to disable the hover event on the anchor tag via jQuery for a specific interval.
example: I have some CSS styles for a hover effect on an anchor element (<a href = "">). When I find an element, I want it to wait a certain amount of time (500ms or so) and then start rendering the hover effect.
Something like this could be?
$("#navigation").hover(function () {
$("li.has-submenu").off('hover');
setTimeout(function () {
$("li.has-submenu").on('hover');
}, 1000);
});
+3
source to share
2 answers
I think you want something like this:
<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 );
})
})
+3
source to share
I recently checked and this is 2015, which means you can use CSS3 for this.
The following will animate the background color of all links after 500ms.
No jQuery or any JavaScript required.
a {
-webkit-transition: all 500ms ease-in;
-moz-transition: all 500ms ease-in;
-ms-transition: all 500ms ease-in;
-o-transition: all 500ms ease-in;
transition: all 500ms ease-in;
}
a:hover {
background-color: #c00;
transition-delay: 500ms;
}
<a href="">Hover me</a>
If, however, you absolutely need to do it with JavaScript, you can use setTimeout
in to apply the hovering class to the element:
jQuery(function($) {
$("a").hover(function() {
var el = $(this);
var timeout = setTimeout(function() {
el.addClass("hover");
}, 500);
el.data("timeout", timeout);
}, function() {
clearTimeout($(this).removeClass("hover").data("timeout"));
});
});
a {
-webkit-transition: all 500ms ease-in;
-moz-transition: all 500ms ease-in;
-ms-transition: all 500ms ease-in;
-o-transition: all 500ms ease-in;
transition: all 500ms ease-in;
}
a.hover {
background-color: #c00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="">Hover me</a>
+2
source to share