Добавить 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(); 
    }); 
}); 

И удалил display:block свойство из класса visible в CSS.

См. Это fiddle