如何在Bootstrap中的动画中添加下拉菜单淡入淡出

Question

I am using following Code to display the Drop down menu on hover -

 .dropdown:hover .dropdown-menu { display:block; margin-top:5px } 

 <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-caret-down"></i></a> <ul class="dropdown-menu dropdown-menu-right"> <li><a href="contact.php">CONTACT</a></li> <li><a href="about.php">ABOUT US</a></li> </ul> </li> 

With this code, the menu appears on hover but it is abrupt. I want the dropdown menu to fade in slowly.

Answer 1

You can use the transition property in the CSS.

Look in this tutorial:

http://www.newmediacampaigns.com/blog/nicer-navigation-with-css-transitions-part-2

Answer 2

 $('#userMenu').on({ "shown.bs.dropdown": function () { $(this).find('.dropdown-menu').addClass('animated fadeIn'); setTimeout(function(){ $('.dropdown-menu').removeClass('animated fade'); },1000); }, "hide.bs.dropdown": function(e) { e.preventDefault(); $(this).find('.dropdown-menu').addClass('animated fadeOut'); setTimeout(function(){ $('.dropdown-menu').removeClass('animated fadeOut').parent().removeClass('open'); },1000); } }); 

 @import url('https://rawgit.com/daneden/animate.css/master/animate.css'); 

  <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <ul class="nav navbar-nav"> <li id="userMenu" class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Open me</a> <ul class="dropdown-menu"> <li><a href="#"><i class="fa fa-sliders"></i>lnk 1</a></li> <li><a href="#"><i class="fa fa-user"></i>lnk 2</a></li> <li><a href="#"><i class="fa fa-clock-o"></i>lnk 3</a></li> </ul> </li> </ul>