Is there a way to only act on a mouse over after x milliseconds and only if it stays moused over?

Question

I currently have a somewhat working version of what I need to be done, it just looks buggy at times. Basically an expandable accordion where only a single sub-list is expandable at any time.

Here is what I have, the issue comes up when you move from top to bottom slowly. It jumps around as one element closes and the cursor hits the one below.

jQuery(document).ready(function() {
    
    $(".nav li").hover(
        function(){
            $(this).css('cursor','pointer');
        }, 
        function() {
            $(this).css('cursor','auto');
        }
    );

    $('.nav').find('ul').hide().end();
    
    $('.nav').find('li').hover( 
        function(){
            $(this).children("ul").stop(true, true).slideDown('500')
        },
        function(){
            $(this).children("ul").stop(true, true).slideUp('500')
        }        
    );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<ul class="nav">
    <li>
        list Item 1
        <ul>
            <li>sublist1 item 1
            </li>
            <li>sublist1 item 2
            </li>
            <li>sublist1 item 3
            </li>
            <li>sublist1 item 4
            </li>
            <li>sublist1 item 5
            </li>
            <li>sublist1 item 6
            </li>
        </ul>
    </li>              
    <li>
        list Item 2
        <ul>
            <li>sublist2 item 1
            </li>
            <li>sublist2 item 2
            </li>
            <li>sublist2 item 3
            </li>
        </ul>
    </li>
    <li>
        list Item 3
        <ul>
            <li>sublist3 item 1
            </li>
            <li>sublist3 item 2
            </li>
            <li>sublist3 item 3
            </li>
            <li>sublist3 item 4
            </li>
            <li>sublist3 item 5
            </li>
            <li>sublist3 item 6
            </li>
            <li>sublist3 item 7
            </li>
            <li>sublist3 item 8
            </li>
        </ul>
    </li>

I've seen some work using setTimeout and clearTimeout but I couldn't get the triggering element to be passed through to the next function.

The page where I got that Idea is here

http://forum.jquery.com/topic/jquery-how-to-clear-settimeout

score 1 · Answer 1 · answered Jan 20 '12 at 22:43

I personally would write my own code for this - rather than use HoverIntent as suggested by The Drake - since I would learn more this way.

I would set a data property, for each object, to 0 and increase it by x amount of time. You would want to detect mouseover and set another data property to true (you use this property in the function which adds 1 to the time property; if set to true, the mouse is over the element and you want to increase it); when the mouse moves away from the element you set that data property to false and reset the timer property.

When the timer property reaches a certain number, you execute a function or whatever it is you want to do after x time.

@Hannes solution did the job for what I need for now. But, i'm new to jquery and don't know what setting a data property is or even how to do it. But I would like to know, so I will try to research this further, thank you. — d.lanza38, Jan 23 '12 at 14:44

score 1 · Accepted Answer · answered Jan 20 '12 at 22:44

1

just add delay(500). before the slideDown and slideUp calls - 500 is the number of milliseconds

$('.nav').find('li').hover( 
    function(){
        $(this).children("ul").stop(true, true).delay(500).slideDown('500')
    },
    function(){
        $(this).children("ul").stop(true, true).delay(500).slideUp('500')
    }        
);

that should work!

answered Jan 20 '12 at 22:44

Hannes

3,752
2
37
47

This did exactly what I needed, I set the delay a little bit longer then the animation of the slideUp and slideDown and it looks perfect, no more erratic behavior jumping around and stuff. Thank you. – d.lanza38 Jan 23 '12 at 14:39

score 0 · Answer 3 · edited May 23 '17 at 11:48

0

You may want to take a look at this answer: Delay jquery hover event?

The recommendation there is to use the HoverIntent plugin

edited May 23 '17 at 11:48

Community

1
1

answered Jan 20 '12 at 22:35

The Drake

36
3

While @Hannes suggestion worked I will still look into this article and the hoverintent plugin. I'm new to jquery and have never used a plugin before so now is a good time to start. – d.lanza38 Jan 23 '12 at 14:41

Is there a way to only act on a mouse over after x milliseconds and only if it stays moused over?

3 Answers3

Linked