<!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. QT编程环境搭建

    使用QT需要QT的库以及QT creator,在QT5以后的版本中,两者已经集成,不需要单独下载了,只需要下载一个文件即可.配置步骤如下: 1.下载qt-opensource-windows-x86- ...

  2. MASMPlus编译出错：error LNK2001: unresolved external symbol _WinMainCRTStartup

    初学汇编,感觉很多不懂.不过那也是,如果懂了的话就不用学了,从无到有学习一门编程语言果然不是那么容易的一件事. 学习汇编总得要有一款汇编软件才行,没理由只是使用Windows自带的DEBUG.于是上了 ...

  3. 一个想法（续六）：IT联盟创业计划：如何进行找钱、寻人、做事？

    前言: 不知时间过的快,或是慢,一周过去了,在这一周,基本是围绕着创业这事在折腾. 也在看一些和创业相关的文章,不小心就看到了dudu在2007年呼喊创业的口号. 于是把他那一年的博文都给看了: 看着 ...

  4. [NOI2007]货币兑换Cash（DP+动态凸包）

    第一次打动态凸包维护dp,感觉学到了超级多的东西. 首先,set是如此的好用!!!可以通过控制一个flag来实现两种查询,维护凸包和查找斜率k 不过就是重载运算符和一些细节方面有些恶心,90行解决 后 ...

  5. Javascript匿名函数

    单独的匿名函数无法运行,就算能运行,也无法调用.解决办法如下: 法1. //把匿名函数赋值给变量 var box=function(){ return "Lee"; }; aler ...

  6. 每天一个linux命令(40)--route命令

    Linux 系统的route 命令用于显示和操作IP路由表(show /manipulate the ip routing table).要实现两个不同的子网之间的通信,需要一台连接两个网络的路由器, ...

  7. oracle 数据库删除表或表数据恢复问题

    oracle恢复误删除的数据:使用闪回,ORACLE 10G及以上版本! 1. flashback table table_name to timestamp systimestamp-1; (sys ...

  8. Number()、parseInt()、parseFloat()的区别

    最近在一个项目中遇到:需要在前台页面用javascript去处理很数值的计算. 各种用法都有,为了统一且保证处理方式正确,特地总结了一下相关的数值转换的用法: 作用: Number():可以用于任何数 ...

  9. java之重定向与转发

    昨天搞了一个问题,关于手机返回按钮的(Android机,ios没有返回键) 在每一步操作都要进过鉴权,如果鉴权不通过就需要跳转到指定jsp页面,再进行link:到app进行登录操作: 然后问题出现了, ...

  10. Cocos2d-x shader学习3： sprite描边(Outline)

    Cocos2d-x 3.x的label使用了freetype字体引擎(http://www.freetype.org/),可以很轻松的实现描边和阴影效果.所以本篇文章只针对于sprite来实现描边效果 ...