jquery结合animate.css 动画效果的实现

本案例是在bootstrap下的实验环境，

html代码

<li class="thumbnail col-md-2">
<a href="{$val['url']}">
<img src="{$val['thumb']}" alt="{$val['title']}">
</a>
<div class="caption">
<h2 class="h4"><a href="{$val['url']}">{$val['title']}</a><span class="pull-right">{number_format($val[weekviews])} <span class="glyphicon glyphicon-heart"></span></span></h2>
</div>
<a class="ccc" href="{$val['url']}">
{$val[dion]}
</a>
</li>

css
.thumbnail{
overflow: hidden;
}
.thumbnail .ccc{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
padding:8%;
color: aliceblue;
display: none;
background:rgb(86, 84, 84);
filter:Alpha(opacity=81);
background: rgba(86, 84, 84, 0.81);
}

js
$(document).on({
'mouseenter':function(){
console.log(1)
$(this).find('.ccc').finish().removeClass('lightSpeedOut').show().addClass('animated lightSpeedIn');
},
'mouseleave':function(){
console.log(2)
$(this).find('.ccc').finish().removeClass('lightSpeedIn').addClass('lightSpeedOut').delay(1000).hide('');
}
},'.thumbnail');为了向下兼容，只好加个delay了