更好的jQuery懸停編碼

Question

我有一個鏈接('#login_display') ，該鏈接在點擊時會滑下子菜單'（'.box_login'）`。 我想要的是當某人將鼠標移出鏈接或子菜單時，該子菜單會向上滑動。

這段代碼有效，但是有更好的方法嗎？ 因為當鼠標離開子菜單（'.box_login'）進入鏈接（'#login_display'）時，它滯后了一點，導致鏈接打開了子菜單（'.box_login'），而鼠標移出將其關閉...

謝謝

這是腳本：

$('#login_display').hover(function() {
    $('.box_login').slideDown('normal');
}, function() {});

$('.box_login').hover(function() {}, function() {
    $('.box_login').slideUp('normal');
});

Answer 1

我會將您的鏈接和您的div幻燈片放到一個容器中。 然后，使用容器的mouseleave事件向后滑動。

http://jsfiddle.net/Whrec/1

<a class="login" id="login_display">Link</a><br/>
<div class="box_login login">blah</div>

$('#login_display').mouseenter(function() {
    $('.box_login').slideDown('normal');
});

$('.box_login, #login_display').mouseleave(function(e) {
    console.log(e.toElement);
    if (!$(e.toElement).hasClass('login'))
        $('.box_login').slideUp('normal');
});

Answer 2

好吧，您可以僅使用mouseenter和mouseout事件來簡化操作。 還緩存$('.box_login') 。 然后使用$(this)而不是重復$('.box_login') ，最后刪除'normal'因為它是默認速度。 您的性能會有所提高，但是我認為除了這之外，您還可以做很多事情。 發布您的html可能有助於獲得更多的性能改進。

var $boxLogin = $('.box_login'); // Cache for speed

$('#login_display').mouseenter(function(){ 
    $boxLogin.slideDown();
});

$boxLogin.mouseout(function(){ 
   $(this).slideUp();
});

Answer 3

查看您的站點，這將是最適合您的。 嘗試這個。

$('#login_display').hover(function() {
    clearTimeout($(this).data('mouseovertimer'));
    clearTimeout($('.box_login').data('mouseovertimer'));
    $('.box_login').slideDown('normal');
}, function() {
    var $this = $(this);
    $this.data('mouseovertimer', setTimeout(function(){
         $('.box_login').slideUp('normal');
    }, 100));
});

$('.box_login').hover(function() {
    clearTimeout($('#login_display').data('mouseovertimer'));
}, function(){
    var $this = $(this);
    $this.data('mouseovertimer', setTimeout(function(){
         $this.slideUp('normal');
    }, 100));
});

演示版