jquery slidedown/slideup сумасшедший эффект для вложенных списков

Question

Я пытаюсь создать меню с аккордеонами mouseenter/mouseleave.

Если вы посмотрите на страницу, вы увидите меню с левой стороны, попробуйте навести указатель мыши на какой-либо элемент, а затем попытайтесь навести указатель мыши на какой-либо элемент ниже, и вы будете сумасшедшим скользким слайд-эффектом/м говорить.

Здесь вы можете прочитать об этом здесь: http://quick.as/o34oiqpw. И вот пример скрипки: http://jsfiddle.net/pu2sH/2/.

JQuery заключается в следующем:

$('ul li').on('mouseenter', function(event) { 
     event.preventDefault(); 
     $('ul:first',this).slideDown(); 
    }).on('mouseleave',function(event){ 
     event.preventDefault(); 
     $('ul:first',this).slideUp(); 
    }); 

HTML, представляет собой простой уль литий Li уль уль ли.

Я не знаю, как «атаковать» эту проблему. Я думал о какой-то задержке на слайде, но я не знаю, как ее реализовать.

Любые советы по этому вопросу были бы очень полезными.

Заранее спасибо.

Answer 1

Я предполагаю, что вы хотите изменить этот код:

$('.menu-lateral .acordeon li').on('mouseenter', function() { 
     $('.children:first',this).slideDown(); 
    }).on('mouseleave', function() { 
     $('.children:first',this).slideUp(); 
    }); 

Чтобы, возможно, что-то вроде этого:

var ani = false; 
    $(document).ready(function(){ 
     //other init code... 

     $('.menu-lateral .acordeon li').on('mouseenter', function() { 
       if (!ani){ 
        ani = true; 
        $('.children:first',this).slideDown(function(){ ani = false;}); 
       } 
     }).on('mouseleave', function() { 
       if (!ani){ 
        ani = true; 
        $('.children:first',this).slideUp(function(){ ani = false;}); 
       } 
      }); 
    });