jQuery - if hover more then 5 seconds then show div

Question

I want to show a div if I hover on a element more then 5 second, I have tried some solutions posted in stackoverflow but none of them are working.

this is my hover function without time out

$('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

none answer is working, but if I change

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

to

alert('shown');

then it works (dont understand why, tried changing fadeIn to show() but still no luck). but my above hover function work without time out.

Solution 1

Use hoverIntent, the syntax is essentially the same as hover. Its super easy and it does exactly what you want with some added bonuses. HoverIntent does a much better job than plan hover of figuring out when you really are hovering and why your mouse is just passing through.

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 provided above...

interval: The number of milliseconds hoverIntent waits between reading/comparing mouse coordinates. When the user's mouse first enters the element its coordinates are recorded. The soonest the "over" function can be called is after a single polling interval. Setting the polling interval higher will increase the delay before the first possible "over" call, but also increases the time to the next point of comparison. Default interval: 100

Solution 2

Try this

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');
});

Solution 3

Should be relatively straight forward. You need to start the timeout of 5 seconds when they hover, 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');
});

Solution 4

You'll need to store a 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');
});

Solution 5

Perhaps use the Javascript Timeout function?

Set the timeout for a function that shows the div to 5000 (5 seconds). And clear the timeout when you hover out. Haven't tested this but hopefully it'll help you further along...

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);
}

View more solutions

Comments

[user007]

can you please tell me how to delay before calling over ??

[Giuliano]

Thanks for your advise.