超级鱼菜单下拉动画

Question

我正在使用superfish菜单制作下拉动画，我添加了animate.css插件问题是当动画完成下拉消失后应用动画时，我想停留几秒钟。使用jquery是否有其他方法add或Remove类。

提前致谢。

 $(document).ready(function(){ $('.sf-menu').superfish(); }); 

 /*=========================== superfish css ==============================*/ /*** ESSENTIAL STYLES ***/ .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; } .sf-menu li { position: relative; } .sf-menu ul { position: absolute; display: none; top: 152%; left: 0; z-index: 99; } .sf-menu > li { float: left; } .sf-menu li:hover > ul, .sf-menu li.sfHover > ul { display: block; } .sf-menu a { display: block; position: relative; transition: all 0.2s linear; } .sf-menu ul ul { top: 0; left: 100%; } /***SKIN ***/ .sf-menu { float: left; } .sf-menu ul { /*box-shadow: 2px 2px 6px rgba(0,0,0,.2);*/ min-width: 12em; *width: 12em; color: #ffffff; } .sf-menu a { padding: .75em 1em; text-decoration: none; } .sf-menu a { font-weight: 500; text-transform: UPPERCASE; color: #555555; } .sf-menu li { background: ; white-space: nowrap; *white-space: normal; -webkit-transition: background .2s; transition: background .2s; } .sf-menu li li a { padding: 14px 15px; border: 1px solid #e8e2e2; background-color: #ffffff; } .sf-menu li li a:focus, .sf-menu li li a:hover, .sf-menu li li a:active { color: #ffffff; background-color: #00d2c7; } /*.sf-menu li:hover, .sf-menu li.sfHover { background: #ffffff; -webkit-transition: none; transition: none; }*/ .header-box .sf-arrows .sf-with-ul:after { top: 20px; right: -10px; } .sf-arrows .sf-with-ul:after { position: absolute; content: '\\f107'; font-family: 'FontAwesome'; padding-right: 14px; right: -12px; top: 57%; font-size: 12px; margin-top: -8px; } 

 <link href="https://fastcdn.org/Animate.css/3.4.0/animate.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/superfish/1.7.9/js/superfish.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.hoverintent/1.8.1/jquery.hoverIntent.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="primary-menu"> <ul class="sf-menu"> <li class="current"><a href="#">Headers</a> <ul class="sub-items animated lightSpeedOut"> <li><a href="#">sub menu</a></li> <li><a href="#">sub menu</a></li> <li><a href="#">sub menu</a></li> <li><a href="#">sub menu</a></li> <li><a href="#">sub menu</a></li> <li><a href="#">sub menu</a></li> </ul> </li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact Us</a></li> </ul> </div><!--primary menu-->