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

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

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

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

демонстрация

Answer 2

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

Ну, вы можете упростить, используя только 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();
});