Question

I have a link('#login_display') that slides down a sub-menu ‘(‘.box_login’)` on click. What I would like is when someone mouseout of the link OR the sub-menu, the sub-menu slides back up.

This code is working, but is there a better way to do it? Because when the mouse leave the submenu(‘.box_login’) to go on the link(‘#login_display’) it lags a little bit cause the link opens the sub-menu(‘.box_login’) and the mouse-out close it…

Thanks

here is the script:

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

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

Answer 1

Looking at your site, this is what will work best for you. Try this.

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