Javascript-форум - анимация подменю повторяется много раз

Добрый день!
подскажите плиз :)

есть меню, если быстро перемещаться по пунктам меню, то анимация подменю повторяется много раз.
как можно убрать это зацикливание?
пример:
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>