添加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