Superfish菜单下拉动画

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