单击单击时jquery slideUp，将鼠标悬停在鼠标悬停时停止重置 [英] jquery slideUp on click, stopped on hover reset on mouseleave

问题描述

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

I have a div that opens when a button is clicked by using $(element).slideDown();

我正在尝试做三件事，

1. 如果鼠标悬停在元素上方，它将保持打开状态
2. 如果鼠标在5秒钟后离开元素，则它会滑动(Up)
3. 如果鼠标在5秒后再没有将元素slideUp()悬停

我要做的是给div一类notHovered.在按钮上单击，容器向下滑动，时间从条件".intro-wrapper"具有类"notHovered"开始.然后，我要做的是将鼠标悬停在该类上，以取消单击中的if语句.这没有用，我感觉是因为.notHovered类已经绑定了?

What I did was to give the div a class of notHovered. On the button click the container slides down and the time starts on the condition ".intro-wrapper" has the class "notHovered". What I then did was remove that class on the hover to cancel out the if statement in the click. This didn't work, I have a feeling it's because the .notHovered class is binded already?

我不确定如何解决此问题，我们将不胜感激.

I'm not sure how to fix this, any help would be greatly appreciated.

    <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);
    });

推荐答案

将超时返回到公共变量，以便在鼠标进入intro-wrapper元素时可以将其清除，如果鼠标再次离开该元素，则可以重新附加超时:

Return the timeout to a common variable so it can be cleared if the mouse enters the intro-wrapper element, and reattached if the mouse leaves that element again :

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>相似的元素，该元素无效，并且在声明类时通常不使用句点

and note that $('btn') selects an element looking like <btn></btn> which is not valid, and you'd normally not use the period when declaring a class

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

这篇关于单击单击时jquery slideUp，将鼠标悬停在鼠标悬停时停止重置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！