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

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!