jQuery Slider вопрос

Question

Я пытаюсь сделать что-то, что я не знаю, как это сделать, но я знаю, что это можно сделать. Есть 2 деления, они оба расширяют всю ширину окна браузера, они оба 450px в высоту. Так что в основном 1 блок поверх другого. Я хочу поместить div между этими двумя, которые будут обнаружены при наведении на что-то в верхнем Div (кнопка или что-то еще) Элемент наведения будет в нижней части верхнего div.

Но мне нужно, чтобы средний div оставался активным, пока его содержимое зависло ... окончено.

Как будет выглядеть jquery? Это то, что я имею до сих пор.

    <script type="text/javascript">
        $(document).ready(function() {
            $("#toggleh1").hover(function() {
                 $(".header2").slideDown(400);

            }, function() {
                 $(".header2").slideUp(400);
            });
        });
    </script>

Спасибо

Answer 1

Лучшим вариантом может быть использование тайм-аута вместо .hover ()

$(document).ready(function() {
    var t; // This will be a timeout
    $('#toggleh1').mouseover(function() {
        if (t)
        {
            clearTimeout(t);
        }

        $('.header2').slideDown(400);
    }).mouseout(function() {
        t = setTimeout(function() {
            $('.header2').slideUp(400);
        }, 500); // .5 second delay before hiding
    });

    $('.header2').mouseover(function() {
        if (t)
        {
            clearTimeout(t);
        }
    }).mouseout(function() {
        t = setTimeout(function() {
            $('.header2').slideUp(400);
        }, 500); // .5 second delay before hiding
    });
});

Для дальнейшего объяснения, когда вы наводите курсор мыши на элемент триггера, показывается div.Когда ваша мышь покидает триггерный элемент, браузер запускает обратный отсчет .5 секунд.Если он достигнет конца этого обратного отсчета, div будет скрыт.Если до того, как закончится обратный отсчет, вы наведите курсор мыши на триггер ИЛИ на сам div, обратный отсчет будет остановлен.Если ваша мышь покидает div, обратный отсчет будет начат снова.

Обратите внимание, что вы можете поиграть с .mouseover () против .mouseenter () и .mouseout () против .mouseleave()