2016-02-01 2 views
3

поэтому у меня есть выпадающее меню с jquery, которое использует слайд вниз и вверх.JQuery Выпадающее меню mouseenter delay

$(document).ready(function(){ 
    $('#menu>li').mouseenter(function(){ 
     $(this).find('ul>li').slideDown(250); 
     $(this).find('ul>li').css('position', 'relative'); 
     $(this).find('ul>li').css('z-index', 9999); 
    }); 
    $('#menu>li').mouseleave(function(){ 
     $(this).find('ul>li').slideUp(250); 
     $(this).find('ul>li').css('position', 'relative'); 
     $(this).find('ul>li').css('z-index', 9999); 
    }); 
}); 

Как я могу сделать это, что моя после моей функции MouseLeave выполняет есть задержка, прежде чем функция MouseEnter может регистрироваться снова?

Заранее благодарен!

+1

Создайте переменную 'dropDownDisabled', которая по умолчанию имеет значение false. В обработчике оставления мыши установите переменную в true и используйте 'setTimeout()', чтобы изменить ее на значение false после x миллисекунд. В вашей мыши введите обработчик переменной. – nnnnnn

ответ

1

Объявите переменную с начальным таймаутом как 0 и после того, как она поступит в mouseleave, функция обновит ее до значения, которое вы хотите отложить.

EDIT
Используйте clearTimeout, чтобы очистить ранее созданный тайм-аут.

$(document).ready(function(){ 
    var delay=0; 
    var timeout; 
    $('#menu>li').mouseenter(function(){ 
     timeout= setTimeout(function(){ 
     $(this).find('ul>li').slideDown(250); 
     $(this).find('ul>li').css('position', 'relative'); 
     $(this).find('ul>li').css('z-index', 9999); 
     },delay); 
    }); 
    $('#menu>li').mouseleave(function(){ 
     if(typeof timeout!=='undefined'){ 
      clearTimeout(timeout); 
     } 
     delay=250; 
     $(this).find('ul>li').slideUp(250); 
     $(this).find('ul>li').css('position', 'relative'); 
     $(this).find('ul>li').css('z-index', 9999); 
    }); 
}); 
Смежные вопросы