jQuery Slider问题

Question

我正在尝试做一些我不知道该怎么做的事，但我知道可以做到。有2个div，它们都扩展了浏览器窗口的全宽，它们都是450px的高度。所以基本上一块在另一块之上。我想在这两者之间加上一个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。当您的鼠标离开触发元素时，浏览器将开始倒计时0.5秒。如果它到达倒计时结束时，div将被隐藏。如果在倒计时结束之前，您将鼠标悬停在触发器或div本身上，倒计时将停止。如果您的鼠标离开div，倒计时将再次开始。

请注意，您可能想要使用.mouseover（）与.mouseenter（）和.mouseout（）与.mouseleave（）

。