<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

    <style type="text/css">

        .test {

            height: 100px;

            width: 100px;

            background: green;

            display: none;

            float: left;

            margin-right: 10px;

        }

    </style>

</head>

<body>

    <div class="test">你</div>

    <div class="test">好</div>

    <div class="test">啊</div>

    <div class="test">哈</div>

    <button class="show">show</button>

    <button class="hide">hide</button>

    <script type="text/javascript">

        $(function(){

            $('.show').on('click',function(){

                $('.test').first().show('fast',function showBox(){

                    $(this).next().show('fast',showBox);

                })

            })

            $('.hide').on('click',function(){

                $('.test').last().hide('fast',function hideBox(){

                    $(this).prev().hide('fast',hideBox);

                })

            })

        })

    </script>

</body>

</html>

jquery列队动画简单演示的更多相关文章

  1. jQuery 滚动动画简单版

    动画的思路很简单,点击页面上一个元素,页面滚动到指定位置.下面介绍一下我3个小时百度的研究成果: 首先是html部分: <html> <body> <a>顶部< ...

  2. HTML5/jQuery雷达动画图表 图表配置十分简单

    1.HTML5/jQuery雷达动画图表 图表配置十分简单 之前我们介绍过不少形形色色的HTML5图表了,像这款HTML5折线图表Aristochart是一款很不错的折线图表,这款HTML5 Canv ...

  3. 适应手机端的jQuery图片滑块动画DEMO演示

    在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  4. jQuery Easing动画效果扩展（转）

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

  5. 放弃使用jQuery实现动画

    在Web开发的圈子里,开发人员经常觉得CSS动画是一种高性能web动画技术.假设想让网页载入的更快一些,就应该用纯CSS动画.事实上这样的观点是错误的,非常多开发人员早就放弃了javascript的动 ...

  6. jQuery Easing 动画效果扩展

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

  7. jQuery的一些简单基础知识

    ### 什么是jQuery?jQuery(js+Query)是一款优秀的JavaScript库,帮助开发人员用最少的代码做更多的事情,官网网站http://jquery.com/ ### 为什么学习j ...

  8. jQuery基础---动画效果

    内容摘要: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性  发文不易,转载请注明出处~ 一．显示.隐藏 jQuery 中显示方法 ...

  9. 第一百七十二节，jQuery，动画效果

    jQuery,动画效果 学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 一．显示.隐藏 jQuery 中显示方法为:. ...

随机推荐

  1. 学习ui-router

    ui-router的学习 在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.Angular原始的路由机制靠ngRoute提供,通过hash和history来实现的,可以检测浏览器是否支 ...

  2. 初学jQuery之jQuery事件与动画

    今天我们就谈谈jquery中的事件和简单动画吧,它们毕竟基础是进阶华丽的根本!! 1.事件 1.window事件 ready   准备就绪 2.鼠标事件 方法                      ...

  3. STL源码剖析（读书笔记）

    STL迭代器种类 2. 迭代器型别使用范例: 3. SGI STL空间配置器分为两级: 4. Vector 的内部存储方式为数组,随机访问迭代器. 5. Vector的size获取方式: 6. Vec ...

  4. mysql数据库封装和 分页查询

    1 之前我们学到了php连接mysql数据库的增删改查,中间要多次调用数据库, 而且以后用到的表比较多,上传中如果需要改数据的话会非常麻烦,但是如果 我们把数据库封装,到时就可以很轻松的把改掉一些数据 ...

  5. Javascript几种跨域方式总结

    在客户端编程语言中如javascript,同源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法.只有当两个域具有相同的协议,相同的主机,相同的端口时,我们就认定 ...

  6. 使用yum安装cmake

    一.搜索yum源中的CMake,查看源中最新的版本是什么,使用命令[root@localhost ~]# yum search cmake ,如果搜索出的结果过多可以配合grep命令来控制搜索结果. ...

  7. 同一环境下新建Standby RAC库

    需求:在同一个环境下新建Standby RAC库,即和Primary RAC在相同的磁盘组. 说明:生产环境一般不建议这样配置DG,因为存储层面是相同磁盘组,灾备的实际意义不大.我这里是用作读写分离. ...

  8. Spring框架(3)---IOC装配Bean(注解方式)

    IOC装配Bean(注解方式) 上面一遍文章讲了通过xml来装配Bean,那么这篇来讲注解方式来讲装配Bean对象 注解方式需要在原先的基础上重新配置环境: (1)Component标签举例 1:导入 ...

  9. Django|第一部

    Django · Django流程 · Django url · Django view · Django form ①:Django流程介绍 MTV模式 注明的MVC模式:所谓MVC就是把web应用 ...

  10. 更改Debian Linux里面的EDT时区为CST时区

    Debian按默认安装,设置的是EDT时区．这样跟我们的系统就都对不上,因此得 改回CST. 只需要两步即可: 使用vi编辑/etc/timezone,把timezone文件的内容更改为:Asia/S ...