<!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. java 非缓冲与缓冲数据写入比较

    //非缓冲计时package com.swust; import java.io.*; /* *功能:创建一个程序,写10000个随机双精度的数到一个文件中,同时测试运用缓冲和非缓冲技术 * 进行这种 ...

  2. iOS企业版APP分发上线流程和注意事项

    0.准备 1]$299/year的企业级开发账号. 2]制作分发证书和描述文件,并下载安装到本机. 3]Xcode编译通过,真机测试通过的源码. 1.打包前配置 1]Xcode 打开项目,common ...

  3. (二) 从Angular1到Angular2需要的预备知识

    1. TypeScript语法与ES6新特性 写惯了jQ的话突然从ES5跳到ES6,又是个变形的ES6(TypeScript),学习成本确实不低.不过笔者也是从ng1直接上手ng2,对与很多新特性的积 ...

  4. spring+struts2+ibatis 框架整合以及解析

    一. spring+struts2+ibatis 框架 搭建教程 参考:http://biancheng.dnbcw.net/linux/394565.html 二.分层 1.dao: 数据访问层(增 ...

  5. GAME(A)性能测试过程模型

  6. java dbutils查询数据库时无法给部分字段赋值原因

    1,javaBean如下: public class User {        /**     * 用户唯一标识(ID)     */    private String uid;    /**   ...

  7. TCP详解

    1. 数据进入协议栈的封装过程 2. TCP连接的三次握手 3. TCP连接的三次握手和关闭时的四次握手 各个状态的意义如下: LISTEN - 侦听来自远方TCP端口的连接请求: SYN-SENT ...

  8. 实际情况来看，还是yield很爽

    0 引言 最近公司有一个 php 的项目,要 port 到 node.js 来.我之前没有接触过这个项目,整个项目使用的是 yaf 框架.整个项目流程是调用服务端的业务数据,然后拼装数据,返回给前端: ...

  9. POJ 2989 All Friends 极大团计数

    POJ 2989 题意:给定一个无向图(节点数小于128)求极大团(不包含在更大的团中)的总数. 对最大团,极大团不熟悉的,建议先阅读最大团搜索问题 ZOJ 1492 再来看本题. 本题数据有限,可以 ...

  10. QQ微信刷屏助手 FlashScreenAssist 1.2发布

    主要功能 文字刷屏 图片刷屏 简易教程 文字刷屏 打开软件之后输入要刷屏的文字,点击[开始],然后点一下微信或者QQ的输入框,就会开始刷屏了,注意[时间间隔]不要调太小,越小越快. 要注意的是.必须在 ...