Есть ли способ воздействовать на мышь только через x миллисекунд, и только если она остается наведенной?

Question

В настоящее время у меня есть несколько рабочая версия того, что мне нужно сделать, иногда она выглядит просто глючной. По сути, расширяемый аккордеон, в котором только один подсписок может быть расширен в любое время.

Вот что у меня есть, проблема возникает при медленном движении сверху вниз. Он прыгает вокруг, когда закрывается один элемент, а курсор ударяется о тот, что ниже.

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>

Я видел некоторую работу с использованием setTimeout и clearTimeout, но я не смог передать триггерный элемент следующей функции.

Страница, где я получил эту идею, здесь

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

Answer 1

Я лично написал бы для этого свой собственный код - вместо того, чтобы использовать HoverIntent, как предложено The Drake, - так как я узнал бы больше таким образом.

Я бы установил свойство данных для каждого объекта равным 0и увеличить его на х количество времени.Вы хотели бы обнаружить наведение мыши и установить для другого свойства данных значение true (вы используете это свойство в функции, которая добавляет 1 к свойству time; если установлено значение true, мышь находится над элементом, и вы хотите увеличить его);когда мышь отходит от элемента, для которого вы устанавливаете это свойство данных в значение false, и сбрасываете свойство таймера.

Когда свойство таймера достигает определенного числа, вы выполняете функцию или все, что хотите, после xвремя.

Answer 2

просто добавьте delay(500). перед вызовами slideDown и slideUp - 500 - это количество миллисекунд

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

это должно работать!

Answer 3

Возможно, вы захотите взглянуть на этот ответ: Задержка события зависания jquery?

Рекомендуется использовать плагин HoverIntent