Question

我有一个div，当使用$（element）.slideDown（）;

单击按钮时会打开

我正在尝试做三件事，

如果鼠标位于元素上方则保持打开状态
如果鼠标离开元素，则在5秒后将其滑动（）
如果鼠标在5秒后永远不会悬停元素slideUp（）

我所做的是给div一类notHovered。在按钮上单击容器向下滑动，时间从条件“.intro-wrapper”开始，类为“notHovered”。然后我做的是在悬停上删除该类以取消单击中的if语句。这不起作用，我有一种感觉，因为.notHovered类已经绑定了吗？

我不知道如何解决这个问题，非常感谢任何帮助。

    <div class=".intro-wrapper notHovered"></div>

    $("btn").click(function() {
        $(".intro-wrapper").slideDown({duration:300,queue:false});    
        if ( $(".intro-wrapper").hasClass("notHovered") ) {
            setTimeout(function() {
                    $(".intro-wrapper").slideUp({duration:300,queue:false});
            },6000);                
        } 
    });


    $( ".intro-wrapper" ).hover(
    function() {
        $(".intro-wrapper").removeClass("notHovered");
    }, function() {
        setTimeout(function() {
            $(".intro-wrapper").slideUp({duration:300,queue:false});
        },6000);
    });

Answer 1

将超时返回到公共变量，以便在鼠标进入intro-wrapper元素时清除它，如果鼠标再次离开该元素则重新连接：

var timer;

$(".btn").on('click', function() {
    $(".intro-wrapper").slideDown(300);
    timer = setTimeout(function() {
         $(".intro-wrapper").slideUp(300);
    }, 5000);                
});


$( ".intro-wrapper" ).on({
    mouseenter: function() {
        clearTimeout(timer);
    },
    mouseleave: function() {
        timer = setTimeout(function() {
            $(".intro-wrapper").slideUp(300);
        }, 5000);
    }
});

并注意$('btn')选择一个看起来像<btn></btn>但无效的元素，并且通常不会在声明类时使用句点

<div class=".intro-wrapper notH
 //         ^^ woot

jquery slideUp on click，在mouseleave上悬停重置时停止

1 个答案: