I have a Text Box that is hidden until a div is hovered over. I am Using Jquery's hover function, and it works. But what I would like is to delay the mouse-out function for a few seconds before toggling closed. Here is my code.
// Pops out TxtBox in Left Column When Hovered then collapses after delay
$(".CollapsedLeft .LeftColumn .SearchHoverCatcher").hover(function() {
$(".CollapsedLeft .LeftColumn .SearchHoverCatcher").addClass("Hovered");
}, function() {
$(".CollapsedLeft .LeftColumn .SearchHoverCatcher").delay(1000).removeClass("Hovered");
});
The above code Hides and shows the text box as desired but the 1000ms delay doesn't occur. Any Thoughts would be greatly appreciated.
Jquery Answers Please.
delay()
works with animations, not just arbitrary statements. You can use a setTimeout
:
var hoverTimeout;
$('#theDiv').hover(function() {
clearTimeout(hoverTimeout);
$(this).addClass('hovered');
}, function() {
var $self = $(this);
hoverTimeout = setTimeout(function() {
$self.removeClass('hovered');
}, 1000);
});