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

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

html代码

  • {$val['title']}

    {$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了



    你可能感兴趣的:(jquery)