延遲jQuery的鼠標離開或toggleClass

Question

我有一個非常簡單的懸停菜單，而我試圖找出如何處理時機。

的目標是500延遲mouseleave事件，和/或不快速越過其他菜單項反應。

基本功能：

$('.button').on({ 
    mouseenter: function() { 
    $(this).children('.menu').addClass('open'); 
    }, 
    mouseleave: function() { 
    $(this).children('.menu').removeClass('open'); 
    }, 
}); 

與此的主要問題是該按鈕和菜單之間的像素間隙 - 當用戶移動朝向菜單鼠標然後觸發mouseleave功能。

第二煩惱是快速經過鼠標按鈕同級它們也觸發其mouseenter函數時。

我也試過，但沒有反應......

mouseleave: function() { 

    setTimeout(function() { 
    $(this).children('.menu').removeClass('open'); 
    }, 500);}, 

}); 

和我一直在使用

.delay(500).queue(function(){ 
    $(this).removeClass("open").dequeue(); 

也嘗試過，但似乎不穩定給我。

console.log($.ui.version)打印1.11.4

Answer 1

考慮等待500毫秒，然後檢查，如果你正在尋找的條件（與徘徊不）仍然是正確的。

如果是這樣，那麼採取適當的行動。

$('.button').on({ 
 
    mouseenter: function() { 
 
    waitEnterExit(this, true); 
 
    }, 
 
    mouseleave: function() { 
 
    waitEnterExit(this, false); 
 
    }, 
 
}); 
 

 

 
function waitEnterExit(el, inside) { 
 
    var button = $(el); 
 

 
    setTimeout(function() { 
 
    var hovered = button.is(':hover'); 
 

 
    if (hovered && inside) 
 
     button.children('.menu').addClass('open'); 
 
    else if (!hovered && !inside) 
 
     button.children('.menu').removeClass('open'); 
 
    }, 500); 
 
}

p { 
 
    display: none; 
 
} 
 

 
.open { 
 
    display: block; 
 
} 
 

 
.button { 
 
    border: 1px solid red; 
 
    margin-bottom: .5em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class=button>1 
 
    <p class=menu>inner</p> 
 
</div> 
 
<div class=button>2 
 
    <p class=menu>inner</p> 
 
</div> 
 
<div class=button>3 
 
    <p class=menu>inner</p> 
 
</div> 
 
<div class=button>4 
 
    <p class=menu>inner</p> 
 
</div>

Answer 2

上面的反應是正確的，但我只是想說明（無法評論，因爲低信譽的，所以我把它當作一個答案）。

需要注意的是，你所使用的鼠標離開不會努力消除在這種情況下類。

mouseleave: function() { 
    //Won't remove .open 
    setTimeout(function() { 
    $(this).children('.menu').removeClass('open'); 
    }, 500);}, 
}); 

會發生什麼情況是，setTimeout函數中的$（this）是Window，而不是您的按鈕。如果你想定位你的按鈕，你必須通過setTimeout函數。一種做法是通過創建一個變量這個。您可以通過在$ set（setTimeout）函數內部和外部調用console.log來測試它，以查看控制檯中打印的內容。

mouseleave: function() { 
    // caller now is the equivalent to this 
    var caller = this; 
    setTimeout(function() { 
    // $(this) equivalent to the .button in this case 
    $(caller).children('.menu').removeClass('open'); 
    }, 500);}, 
});