How to set mouseover display delay

Question

I'm using mouseover effect on a table list to show content of lesson on hover. However, as it's in table, it's "changing too fast", when going from one row to another, that is why I would like to put some delay on the mouseover effect.

My code currently looks like this :

onmouseover="show('id')" onmouseout="hide('id')">

How to make a small delay ?

Has it something to do with php? anyway, are you using any library such as jQuery or are you using pure javascript? If you're not, you may take a look at the setTimeout javascript function and use it either on the show function and the hide function :) — briosheje, Apr 23 '14 at 09:48
You might want to try to put some type of sleep, check this it could help you http://stackoverflow.com/questions/951021/what-do-i-do-if-i-want-a-javascript-version-of-sleep — gbestard, Apr 23 '14 at 09:52

score 1 · Answer 1 · answered Apr 23 '14 at 14:25

A non jQuery solution, for reference:

<script>

    var show=function(x)
    {
        setTimeout(
            function()
            {
                do the stuff...
            },
            200
        );
    };

    var hide=function(x)
    {
        setTimeout(
            function()
            {
                do the other stuff...
            },
            200
        );
    };

</script>
<div onmouseover="show('id')"  onmouseout="show('id')"></div>

Basically, I've defined show and hide as functions which create anonymous functions that do the actual showing and hiding and then run them after a 200ms delay using setTimeout.

score 0 · Answer 2 · answered Apr 23 '14 at 10:03

0

An awesome plugin by brain if you use jquery to control your hover actions and timers. http://cherne.net/brian/resources/jquery.hoverIntent.html

or you can just use vannilla javascript to set timers.

answered Apr 23 '14 at 10:03

РАВИ

11,467
6
31
40

score 0 · Answer 3 · answered Apr 23 '14 at 10:06

0

If you are working with jQuery's show and hide methods you can simply put the desired duration in ms between the brackets:

<div onmouseover="$('#id').show(600)" onmouseout="$('#id').hide(600)">
    some content
</div>

answered Apr 23 '14 at 10:06

Marcel Binder

166
10

Thanks for this, i would like to use this one, however i struggle because my code currently looks like this (not simply "id") : onmouseover="'id;?>'" onmouseout="hide('id;?>')"> – user3563888 Apr 23 '14 at 13:06
Oh that shouldn't be a problem. PHP statements are preprocessed on the server side. Just write something like
– Marcel Binder Apr 23 '14 at 13:49
I used your exact code, but mouseover is not working anymore. I guess the PHP statement is not processed then, because when i inspect html code rendered, i get : onmouseover="$('38').show(600)" – user3563888 Apr 23 '14 at 14:35
Managed to solve, even when showing exact same in code, mouseover is not working :( I guess there is conflict Jquery/PHP ? – user3563888 Apr 23 '14 at 14:47
Should the detail box be displayed after a certain period of time, then use the solution above [link] http://stackoverflow.com/a/23247335/3095875 or should there be an animation (so the content fades in slower)? – Marcel Binder Apr 24 '14 at 14:45

How to set mouseover display delay

3 Answers3