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

Posted 2023-05-09

【中文标题】jquery slideUp on click，在 mouseleave 上悬停重置时停止

【英文标题】：jquery slideUp on click, stopped on hover reset on mouseleave

【发布时间】：2013-12-25 19:54:24

【问题描述】：

我有一个 div，当使用 $(element).slideDown(); 单击按钮时打开一个 div；

我正在尝试做三件事，

如果鼠标悬停在元素上，它会保持打开状态 如果鼠标离开元素它会在 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);
    );

【参考方案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

【讨论】：

太棒了！这非常有效，非常有意义，感谢您的帮助和解释！