<!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. Python 最大公约数的欧几里得算法及Stein算法

    greatest common divisor(最大公约数) 1.欧几里得算法 欧几里德算法又称辗转相除法,用于计算两个正整数a,b的最大公约数. 其计算原理依赖于下面的定理: 两个整数的最大公约数等 ...

  2. Java变量&&简单程序流程&&循环

    变量:强类型局部变量: 1.先赋值,后使用 2.作用范围:从定义开始,到所在代码块结束 3.重合范围内不允许重复命名 数据类型(8中基本类型) byte 1B -128~127 short 2B -3 ...

  3. java程序测试之字符流

    package filestream; import java.io.FileReader; import java.io.FileWriter; import java.io.FileNotFoun ...

  4. 自己用到的相关Linux命令，谨以记录

    1.查看磁盘使用情况 df -h(方便看些) df -l(字节大小,不方便看) 2.查看根目录下文件/文件夹大小 du -sh /*(/*表示根目录下所有文件) 3.查看文件列表时显示文件大小 ll ...

  5. start(共勉)

    “父母在,不远游,游必有方.”正犹豫着或者已经在路上的年轻人,如果选择远行,请风雨兼程,好好奋斗吧.

  6. NodeJS 框架一览

    Express 当你使用Node.js构建web应用程序时, Express通常被视为事实上的Web服务器.它的哲学(一个可以使用中间件包扩展的简约核心)是大多数Node.js开发者所熟悉的. Koa ...

  7. wordPress查看站点时，显示文件目录

    1.在wordpress的代码目录中增加.htaccess文件. 2.在.htaccess文件中加入如下内容: DirectoryIndex index.php index.html# BEGIN W ...

  8. C# 运行时通过鼠标拖动改变控件的大小

    来源:http://blog.csdn.net/yanleigis/article/details/1819447 using System; using System.Collections.Gen ...

  9. Javascript高级程序设计——语法、关键字、保留字、变量、数据类型

    1.了解基本语法,JS大小写区分.注释风格.什么是严格模式等. 2.知道ES3和ES5的关键字和保留字大概有哪些,如果使用关键字会报什么错,使用保留字决定于特定浏览器引擎. 3.全局变量和局部变量的定 ...

  10. javascript组成概述认识

    这里的JavaScript组成概述是说的在浏览器端渲染的JavaScript而不是nodejs js组成概述 js的完整实现是由ECMAscript.DOM.BOM三个部分组成的: -ECMAscri ...