添加jQuery的动画/过渡到菜单下拉

Question

我有一个小提琴位于here.

第一对夫妇的菜单项单击时有下拉菜单。我对我的生活无法弄清楚如何为持续1到2秒的下拉菜单添加动画/转场。我希望它顺利地滑下来，不仅仅是点击并在那里。如果有人能帮助我会很感激。

<ul id="nav"> 
<li class="parent"><a class="nav-top" href="#">Web Design <i class="fa fa-angle-double-down"></i></a> 
    <ul class="sub-nav"> 
     <li><a class="nav-top" href="#">Self Storage Websites</a></li> 
     <li><a class="nav-top" href="#">Responsive Websites</a></li> 
    </ul> 
</li> 
<li class="parent"><a class="nav-top" href="#">Internet Marketing <i class="fa fa-angle-double-down"></i></a> 
    <ul class="sub-nav"> 
     <li><a class="nav-top" href="#">Real SEO</a></li> 
     <li><a class="nav-top" href="#">PPC (Pay Per Click) Ads</a></li> 
     <li><a class="nav-top" href="#">Social Media Marketing</a></li> 
    </ul> 
</li> 
<li class="parent"><a class="nav-top" href="hosting.html">Website Hosting</a></li> 
<li class="parent"><a class="nav-top" href="#">About Us <i class="fa fa-angle-double-down"></i></a> 
    <ul class="sub-nav"> 
     <li><a class="nav-top" href="#">About EiD</a></li> 
     <li><a class="nav-top" href="#">Careers</a></li> 
    </ul> 
</li> 
<li class="parent"><a class="nav-top" href="hosting.html">Contact Us</a></li> 

$(document).ready(function() { 
     $('.parent').click(function() { 
      $(".parent").not(this).find(".sub-nav").removeClass('visible'); 
      $(this).find('.sub-nav').toggleClass('visible'); 
     }); 
    }); 

Answer 1

我已经加入jQuery的slideUp和slideToggle功能给予滑动效果。

$(document).ready(function() { 
    $('.parent').click(function() { 
    $(".parent").not(this).find(".sub-nav").removeClass('visible').slideUp(); 
    $(this).find('.sub-nav').toggleClass('visible').slideToggle(); 
    }); 
}); 

并已删除visible类CSS中display:block财产。

请查阅fiddle