jquery slideUp上點擊，停在懸停重置上mouseleave

Question

我有一個div，打開時通過使用$（元素）.slideDown（）單擊按鈕。

我試圖做三件事，

1. 如果鼠標在元素上其打開
2. 如果鼠標離開元素它效果基本show（）5秒鐘後
3. 如果鼠標永遠不會在5秒後徘徊元素slideUp（）

我所做的就是給div一個notHovered類。在按鈕上單擊該容器滑落，時間開始條件「.intro包裝」具有類「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