Is there a way to only act on a mouse over after x

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

Answer 1

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.

Answer 2

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!

Answer 3

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

The recommendation there is to use the HoverIntent plugin