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了