は、私がクリックされたときのメニュー項目の最初のカップル<a href="https://jsfiddle.net/patricksharer/vhz39t8m/#&togetherjs=UoNvBDvVFS" rel="nofollow">here.</a></p> <p>に位置フィドルは、ドロップダウンを持っていたメニューのドロップダウンにjqueryのアニメーション/遷移

Question

を追加します。私の人生のために、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

Iは、摺動効果を与えるために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(); 
    }); 
}); 

とCSSでクラスvisibleからdisplay:blockプロパティを削除しました。

参考にしてくださいfiddle