Clever Geek Handbook

JQuery - if hover over 5 seconds then render div

I want to show a div if I hover an element for more than 5 seconds, I tried some solutions posted on stackoverflow but none of them work.

this is my hover function without time

$('div.avatar-with-data, .q-item-avatar').hover(function(){
        $(this).find('div.user-data').fadeIn('fast');
    },function(){
        $(this).find('div.user-data').fadeOut('fast');
    });

UPDATE

The answer doesn't work, but if I change

$(this).find('div.user-data').fadeIn('fast');

to

alert('shown');

then it works (not sure why, tried changing fadeIn to show () but still no luck). but my above hover function works without timeout.

+3


source to share


7 replies


Use hoverIntent , the syntax is essentially the same as hover. It's super easy and does exactly what you want it to do with some added bonuses added. HoverIntent does a much better job than planning for the hover, when you actually hover and why your mouse just passes.

var config = {    
     over: makeTall, // function = onMouseOver callback (REQUIRED)    
     timeout: 500, // number = milliseconds delay before onMouseOut    
     interval: 5000, // number = milliseconds delay before trying to call over    
     out: makeShort // function = onMouseOut callback (REQUIRED)    
};

$("#demo3 li").hoverIntent( config )


Directly from the first page of the hoverIntent link above ...

interval: The number of milliseconds hoverIntent waits between reading / comparing mouse coordinates. When the user mouse first enters an element, its coordinates are recorded. Most likely, the "over" function can be called after one polling interval. Setting the polling interval higher will increase the latency to the first possible over-call, but also increase the time to the next comparison point. Default interval: 100

+3


source


try it



var tOut;
$('div.avatar-with-data, .q-item-avatar').hover(function(){
    tOut = setTimeout(function(){
        $(this).find('div.user-data').fadeIn('fast');
    },5000);
},function(){
    clearTimeout(tOut);
    $(this).find('div.user-data').fadeOut('fast');
});
+7


source


Should be relatively straightforward. You need to start a 5 second timeout when they hover over, and clear it when they stop hovering.

var hoverTimeout;

$('div.avatar-with-data, .q-item-avatar').hover(function() {
    hoverTimeout = setTimeout(function() {
        $(this).find('div.user-data').fadeIn('fast');
    }, 5000);
}, function() {
    clearTimeout(hoverTimeout);
    $(this).find('div.user-data').fadeOut('fast');
});
+2


source


You will need to store the variable and use setTimeout()

. Something like this should work:

var timer;

$('div.avatar-with-data, .q-item-avatar').hover(function() {  
    hovered = true;
    timer = window.setTimeout(function() {  
            $(this).find('div.user-data').fadeIn('fast');
    }, 5000);
}, function() {  
    window.clearTimeout(timer); 
    $(this).find('div.user-data').fadeOut('fast');
});
+1


source


Perhaps the Javascript timeout feature is being used?

Set a timeout for the function that shows the div up to 5000 (5 seconds). And clear the timeout when you go out. Haven't tested this, but hopefully this helps you further ...

var timeout;

$('div.avatar-with-data, .q-item-avatar').hover(function(){
        timeout=setTimeout(showTooltip,5000);    
    },function(){      
        hideTooltip();
    });

function showTooltip() {
   $(this).find('div.user-data').fadeIn('fast');
   clearTimeout(t);
}

function hideTooltip() {
   $(this).find('div.user-data').fadeOut('fast');
  clearTimeout(timeout);
}
+1


source


This code will also avoid multiple bouncing

 var myVar;
 $(".liveUser").on({
        mouseenter: function () {
        myVar = setTimeout(function(){
             $(".userDetail").stop().hide().fadeIn();
                 }, 400);
        },
        mouseleave: function () {
            clearTimeout(myVar);
            $(".userDetail").stop().fadeOut();
       }
   });
0


source


I am a new user on the forum. Hope they help you! I like to solve problems with teenage codes like thread:

$(".liveUser").on("mouseover mouseout", function(event) {
  if (event.type !== "mouseover")
    clearTimeout(showID);
  showID = setTimeout(function() {$(".userDetail")[(event.type === "mouseover"?"show":"hide")]()}, (event.type === "mouseover"?3000:0));
});

I hope I helped you! Giuliano

0


source






More articles:


All Articles