Добрый день!
подскажите плиз
есть меню, если быстро перемещаться по пунктам меню, то анимация подменю повторяется много раз.
как можно убрать это зацикливание?
пример:
https://jsfiddle.net/alexscus/cmLngter/
<script>
$('#navigation > ul > li').hover(
function(){
$(this).children("a").siblings().slideDown(500);
},
function(){
$(this).children("a").siblings().slideUp(500);
});
</script>
<div id="navigation">
<ul>
<li><a href="#"><span>Nav</span></a>
<div class="subnav"><ul>
<li><a href="#">text text</a></li>
<li><a href="#">text text</a></li>
<li><a href="#">text text</a></li>
<li><a href="#">text text</a></li>
<li><a href="#">text text</a></li>
<li><a href="#">text text</a></li>
</ul></div>
</li>
<li><a href="#"><span>Nav</span></a>
<div class="subnav"><ul>
<li><a href="#">text text</a></li>
<li><a href="#">text text</a></li>
<li><a href="#">text text</a></li>
<li><a href="#">text text</a></li>
<li><a href="#">text text</a></li>
<li><a href="#">text text</a></li>
</ul></div>
</li>
<li><a href="#"><span>Nav</span></a></li>
<li><a href="#"><span>Nav</span></a></li>
</ul>
</div>
<style>
#navigation{ background:#555; margin:0 auto; height:50px; width:100%; padding:0 39px; position:relative;}
#navigation a:hover{ text-decoration:none;}
#navigation > ul:after{ width:100%; height:0px; visibility:hidden; overflow:hidden; content: ''; display:inline-block;}
#navigation > ul{ text-align:justify; line-height:0; font-size:1px; text-justify:newspaper; text-align-last:justify;}
#navigation > ul > li{ position:relative; display:inline-block; text-align:left; line-height:normal; font-size:14px; vertical-align:top;}
#navigation > ul > li > a{ display:block; font:700 23px/50px 'Roboto', sans-serif; color:#fff; padding:0 22px;}
#navigation span{ position:relative; display:block; overflow:hidden;}
#navigation > ul > li:hover span:before, #navigation ul li.act a span:before {-webkit-transform: translateY(0);transform: translateY(0);}
#navigation .subnav{ display:none; position:absolute; left:0; top:50px;}
#navigation .subnav ul{ text-align:left; text-justify:none; text-align-last:left; padding:10px 22px; background:#fff;}
#navigation .subnav ul:after{ display:none;}
#navigation .subnav a{ font:16px/18px 'Open Sans', sans-serif; color:#555; padding:5px 0; display:block; white-space:nowrap; transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out;}
#navigation .subnav a:hover{ color:#fcca00;}
ul{ list-style:none;}
a{ outline:none; text-decoration:none;}
*{ margin:0; padding:0; box-sizing:border-box;}
</style>
