Лучшее кодирование jquery hover

Question

У меня есть ссылка ('#login_display'), которая сворачивает подменю '(' .box_login ') `on click. Я бы хотел, чтобы кто-то нажал на ссылку или подменю, подменю сместится.

Этот код работает, но есть ли лучший способ сделать это? Потому что, когда мышь покидает подменю ('. 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

Глядя на ваш сайт, это то, что будет работать лучше для вас. Попробуй это.

$('#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)); 
}); 

Demo

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

Я бы разместил вашу ссылку и свое слайд вниз в контейнере. Затем используйте событие 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'); 
});