<!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. jquery实现全选、全不选、反选、获取选中的所有值总结

    HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮. <!doctype html> <html> <head& ...

  2. 如何用docker安装laravel开发环境

    如何用docker安装laravel开发环境 看laravel框架的官方文档安装部分时,发现需要安装特别多软件,估计还有许多复杂的配置,官方推荐使用Laravel Homestead虚拟机进行安装,但 ...

  3. 关于BOM的理解

    BOM提供了很多对象,用于访问浏览器的功能,这些功能与网页内容无关 BOM的核心对象时window,她表示浏览器的一个实例 window的双重角色   1.JS访问浏览器窗口的一个接口  2.ECMA ...

  4. C# 6 与 .NET Core 1.0 高级编程 - 40 ASP.NET Core（下）

    译文,个人原创,转载请注明出处(C# 6 与 .NET Core 1.0 高级编程 - 40 章  ASP.NET Core(下)),不对的地方欢迎指出与交流. 章节出自<Professiona ...

  5. Entity Framework+SQLite+DataBaseFirst

    Entity Framework+Sqlite+DataBaseFirst 本篇主要是说明在vs中配置Sqlite,及使用Entity Framework DataBaseFirst模式. 如果没有下 ...

  6. Android Realm数据库使用指南

    Android Realm数据库使用指南 Realm数据库, 目前有Java, Objective‑C, React Native, Swift, Xamarin的几种实现, 是一套用来取代SQLit ...

  7. MongoDB的安装及恢复

    在http://www.mongodb.org/display/DOCS/Downloads 下载对应版本 mongodb 安装数据库 解压文档,复制到c盘,改名为mongodb 新建文件夹c:/da ...

  8. web前端的发展态势 浅识

    以前 作为一个java程序员写的代码主要还是后台的代码,虽然开始的时候前后端都写,但是也是用别人造好的轮子来用,学学html,css,js,jquery,再找一个前端ui框架学学,上手之后我们就可以写 ...

  9. Hibernate框架双向多对多关联映射关系

    建立双向多对多关联关系    Project.java (项目表)                private Integer proid;                private Strin ...

  10. 《深入理解Java虚拟机》学习笔记之类加载

    之前在学习ASM时做了一篇笔记<Java字节码操纵框架ASM小试>,笔记里对类文件结构做了简介,这里我们来回顾一下. Class类文件结构 在Java发展之初设计者们发布规范文档时就刻意把 ...