Меню Jquery вверх и вниз много раз

у меня есть это меню анимированного с JqueryМеню Jquery вверх и вниз много раз

$(document).ready(function() { 
      $(".submenu").slideUp(100, function(){ 
       $(".menu_item").css({overflow:'visible'}) 
      }); 
      $(".submenu").css({display:'none'}); 
      $(".menu_item").hover(function({ 
       $(this).stop(true, true).animate({ 
        marginTop: "0px" 
       }, 300, function() { 
        //if($(".submenu", this).queue().length < 2) 
        $(".submenu", this).slideDown(300); 
       }); 
      }, function() { 
       $(".submenu", this).stop(true, true).slideUp(300, function() { 
        $(this).parent().animate({ 
         marginTop: "20px" 
        }, 300); 
       }); 
      }); 
    });

и HTML

<div id="navigation"> 

      <a href="" class="single">Home</a> 

      <div class="menu_item">Azienda 
      <div class="submenu"> 
       <a href="#">Link</a> 
       <a href="#">Link</a> 
       <a href="#">Link</a> 
      </div> 
     </div> 

     <div class="menu_item">Servizi 
      <div class="submenu"> 
       <a href="#">Link</a> 
       <a href="#">Link</a> 
       <a href="#">Link</a> 
      </div> 
     </div> 

    </div><!--end navigation-->

, но:

есть небольшая "ошибка" с этим, если вы наводите курсор мыши на выпадающее меню более одного раза, меню будет продолжать движение вверх и вниз по количеству раз, когда вы на него нависали.

источник

2011-02-04 Pierluigi Ballatore

Эй, это, кажется, работает хорошо для меня:

<html> 
<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
     $(".submenu").slideUp(100, function() { 
      $(".menu_item").css({overflow:'visible'}) 
     }); 
     $(".submenu").css({display:'none'}); 
     $(".menu_item").hover(function(){ 
      $(this).stop().animate({ 
       marginTop: "0px" 
      }, 300, function() { 
       $(".submenu", this).stop().slideDown(300); 
      }); 
     }, function() { 
      $(".submenu", this).stop().slideUp(300, function() { 
       $(this).parent().stop().animate({ 
        marginTop: "20px" 
       }, 300); 
      }); 
     } 
    ); 

}); 
</script> 
</head> 
<body> 
<div id="navigation"> 

      <a href="" class="single">Home</a> 

      <div class="menu_item">Azienda 
      <div class="submenu"> 
       <a href="#">Link</a> 
       <a href="#">Link</a> 
       <a href="#">Link</a> 
      </div> 
     </div> 

     <div class="menu_item">Servizi 
      <div class="submenu"> 
       <a href="#">Link</a> 
       <a href="#">Link</a> 
       <a href="#">Link</a> 
      </div> 
     </div> 

    </div><!--end navigation--> 
</body> 
</html>

источник

2011-02-04 11:02:04

Не вдаваясь в конкретный код, вы можете установить некоторые «переменные состояния», что-то вроде (псевдо-код):

var is_open = false; 
if (mouseover && !is_open) { 
    // start_animation and set is_open = true when_finished 
} 
// Same for closing 
....

источник

2011-02-04 10:54:32 Don

Меню Jquery вверх и вниз много раз

ответ

Смежные вопросы