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

今天药忘吃喽~ 2022-06-02 00:05 269阅读 0赞

本案例是在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了

发表评论取消回复

表情：

评论列表（有 0 条评论，269人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery - 效果动画

前言： jQuery给我们封装了很多的动画效果，相比起简单传统的CSS来说，功能强大很多，今天就来学习学习 jQuery给我们封装的一系列的动画

迈不过友情╰/ 2023年06月15日 07:30/ 0 赞/ 84 阅读

相关【JavaWeb】JQuery实现抽奖的动画效果功能

这篇博客，教你怎么用JQuery框架实现抽奖送老婆功能哈哈哈！开个玩笑，就是简单的抽奖功能代码如下： <!DOCTYPE html>

╰+攻爆jí腚メ/ 2023年03月02日 05:25/ 0 赞/ 34 阅读

相关用jQuery实现的菜单下划线动画效果

前几天在网站看到一个菜单下划线动画效果感觉不错.不过他的效果有缺陷,鼠标快速移动时会导致动画停不下来. 自己拿jQuery写了一个,解决了上面的问题,而且菜单的独立性比较好,

清疚/ 2022年09月19日 04:17/ 0 赞/ 253 阅读

相关 jQuery动画效果

学习要点： 1.显示、隐藏 2.滑动、卷动 3.淡入、淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性在以前很长一段时间里，网页上的

古城微笑少年丶/ 2022年08月18日 15:13/ 0 赞/ 258 阅读

相关 jQuery UI实现动画效果

效果实现描述：页面文档载入后，为第一张图片添加class属性值为img1，为第二张图片添加class属性值img2，为第三张图片添加class属性img3，为第

绝地灬酷狼/ 2022年06月15日 06:16/ 0 赞/ 353 阅读

相关原生js简单实现jQuery的动画效果

// 动画效果 function startMove(obj,json,fn){ clearInterval(obj.timer); var

偏执的太偏执、/ 2022年06月03日 05:35/ 0 赞/ 226 阅读

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

本案例是在bootstrap下的实验环境， html代码 <li class="thumbnail col-md-2">

今天药忘吃喽~/ 2022年06月02日 00:05/ 0 赞/ 270 阅读

相关 jQuery的效果|动画，其他

4.效果|动画 4.1基本通过改变元素高度和宽度进行显示或隐藏 ![这里写图片描述][70] show(speed,fn) 显示参数1：speed速度。

「爱情、让人受尽委屈。」/ 2022年05月13日 09:56/ 0 赞/ 290 阅读

相关 jQuery动画效果——点赞动画效果

任务描述本关任务：掌握jQuery常见的动画效果——自定义动画。实现的效果如下： ![206510][] 相关知识为了完成本关任务，你需要掌握：1.平移动画，

清疚/ 2022年04月05日 13:44/ 0 赞/ 480 阅读

相关 jQuery中的动画效果

步骤： 1、导入jQuery相关的文件 2、文档加载完成事件：$(function)：页面初始化的操作：绑定事件，启动页面定时器 3、确定相关操作的事件

亦凉/ 2022年01月21日 08:59/ 0 赞/ 396 阅读