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

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

html代码

 
                
                    
                
                

                    
{$val['title']}{number_format($val[weekviews])} 
                
                
                    {$val[dion]}
                
            
 

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了