1. 滑入动画（类似于商店的卷帘门）

$(selector).slideDown(speed, 回调函数);

解释： 此语句实现的功能为， 在XX时间内， 下拉动画， 显现元素。

　　　当 slideDown() 中省略参数， 或者传入不合法的值是， 那么系统会使用默认值：400ms。

　　　回调函数可以省略不写。

示例代码如下：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery之滑入动画</title>

    <style>

        #box{

            width: 200px;

            height: 200px;

            display: none;

            background-color: #ff6700;

        }

    </style>

</head>

<body>

    <div id="box"></div>

    <script type="text/javascript" src="jquery.js"></script>

    <script>

        $(function () {

            $("#box").slideDown(5000, function () {

                alert("jQuery滑入动画结束");

            });

        })

    </script>

</body>

</html>

2. 滑出动画效果

$(selector).slideUp(speed, 回调函数);

解释： 此语句实现的功能为， 在XX时间内， 上拉动画， 显现元素。

　　　当 slideUp() 中省略参数， 或者传入不合法的值是， 那么系统会使用默认值：400ms。

　　　回调函数可以省略不写。

示例代码如下：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery之滑出动画</title>

    <style>

        #box{

            width: 200px;

            height: 200px;

            display: block;

            background-color: #ff6700;

        }

    </style>

</head>

<body>

    <div id="box"></div>

    <script type="text/javascript" src="jquery.js"></script>

    <script>

        $(function () {

            $("#box").slideUp(5000, function () {

                alert("jQuery滑出动画结束");

            });

        })

    </script>

</body>

</html>

3. 便捷滑入滑出动画效果

$(selector).slideToggle(speed, 回调函数);

使用此方法， 可以进行滑入滑出效果的切换， 此方法有两种情形：

（1）当元素的设置为：display = block; 也就是元素已经显示时， 使用 slideToggle()将会变成上拉隐藏。

（2）当元素的设置为：display = none; 也就是元素已经隐藏时， 使用 slideToggle()将会变成下拉显示。

回调函数可以省略不写。

示例代码如下：（元素属性 display = block;）

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery之滑入滑出动画</title>

    <style>

        #box{

            width: 200px;

            height: 200px;

            display: block;

            background-color: #ff6700;

        }

    </style>

</head>

<body>

    <div id="box"></div>

    <script type="text/javascript" src="jquery.js"></script>

    <script>

        $(function () {

            $("#box").slideToggle(5000, function () {

                alert("jQuery滑入滑出动画结束");

            });

        })

    </script>

</body>

</html>

4. jQuery滑入滑出动画实例：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>按钮控制元素滑入滑出</title>

    <style>

        .box{

            width: 200px;

            height: 200px;

            display: none;

            background-color: green;

        }

    </style>

    <script type="text/javascript" src="jquery.js"></script>

    <script>

        $(function () {

            //点击“滑入”按钮， 实现元素显示

            $("button:eq(0)").click(function () {

                $(".box").slideDown(3000, function () {

                    alert("滑入动画执行完毕！");

                });

            });

            //点击“滑出”按钮， 实现元素隐藏

            $("button:eq(1)").click(function () {

                $(".box").slideUp(3000, function () {

                    alert("滑出动画执行完毕！");

                });

            });

            //点击“切换”， 实现元素间的显示/隐藏

            $("button:eq(2)").click(function () {

                $(".box").slideToggle(3000, function () {

                    alert("滑入/滑出动画执行完毕！");

                });

            });

        })

    </script>

</head>

<body>

    <button>滑入</button>

    <button>滑出</button>

    <button>切换</button>

    <div class="box"></div>

</body>

</html>

JQuery动画之滑入滑出动画的更多相关文章

  1. 【jquery隐藏、显示事件and提示callback】【淡入淡出fadeToggle】【滑入滑出slideToggle】【动画animate】【停止动画stop】

    1.jquery隐藏and显示事件 $("p").hide();      //隐藏事件$("p").hide(1000);  //1秒内缓慢隐藏$(" ...

  2. 在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...

  3. jQuary总结7:动画操作,显示与隐藏 淡入淡出, 滑入滑出

    1 jquery提供了三组基本动画,这些动画都是标准的.有规律的效果,jquery还提供了自定义动画的功能. 2 显示与隐藏: show([speed],[easing],[callback]) 显示 ...

  4. css transition 实现滑入滑出

    transition是css最简单的动画. 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!! 但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办?  ...

  5. 三角函数与缓入缓出动画及C#实现（图文讲解）

    日常经常能看到缓入缓出的动画效果,如: 1,带缓入缓出效果的滚动条: 2,带缓入缓出效果的呼吸灯: 像上面这种效果,就是用到了三角函数相关的知识,下面将从头开始一步步去讲解如何实现这种效果. 一.基础 ...

  6. 伴随ListView、RecyclerView、ScrollView滚动滑入滑出小图标--第三方开源--FloatingActionButton

    FloatingActionButton在github上的项目主页是:https://github.com/makovkastar/FloatingActionButton 它的依赖包NineOldA ...

  7. WPF技术触屏上的应用系列（五）: 图片列表异步加载、手指进行缩小、放大、拖动 、惯性滑入滑出等效果

    原文:WPF技术触屏上的应用系列(五): 图片列表异步加载.手指进行缩小.放大.拖动 .惯性滑入滑出等效果 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统, ...

  8. div层的滑入滑出实例

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head runat=&quo ...

  9. js窗口边缘滑入滑出效果-初级代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Scala学习十三——集合

    一.本章要点 所有集合都扩展自Iterable特质; 集合有三大类,分别为序列,集和映射; 对于几乎所有集合类,Scala都同时提供可变和不可变的版本; Scala列表要么是空的,要么拥有一头一尾,其 ...

  2. 解决低版本IE关于html5新特性的兼容性问题html5shiv.js和Respond.js，以及excanvas.js解决低版本IE不支持canvas的问题

    插件:html5shiv.js 让IE9以下版本支持html5新标签,git地址https://github.com/aFarkas/html5shiv 用于解决IE9以下版本浏览器对HTML5新增标 ...

  3. zepto学习（三）之详解

    zepto Zepto就是jQuery的移动端版本, 可以看做是一个轻量级的jQuery github地址: https://github.com/madrobby/zepto 官方地址: http: ...

  4. HTML中由于DIV(块元素)浮动，导致的父元素高度塌陷问题的解决方案

    费话不多说,直接上问题: 1.开始时,页面只有两个DIV的嵌套(见图) 运行结果是: 现在看运行的是正常的,但是当我设置让 class="box2" 的DIV浮动时 运行结果是这样 ...

  5. C++ STL 之 deque

    deque 和 vector 的最大差异? 一在于 deque 允许常数时间内对头端进行元素插入和删除操作. 二在于 deque 没有容量的概念,因为它是动态的以分段的连续空间组合而成,随时可以增加一 ...

  6. OnePlus5刷 TWRP

    # 安装adb apt install adb # 安装fastboot apt install fastboot # 进入bootloader模式 adb reboot bootloader # 刷 ...

  7. impala 下的SQL操作

    1.修改字段中文名称 ALTER TABLE tablename CHANGE doc_rev_ind  doc_rev_ind varchar(40) comment '收取要求' 2.增加一列 A ...

  8. C#遍历文件夹下的所有文件

    DirectoryInfo theFolder = new DirectoryInfo(path); DirectoryInfo[] dirInfo = theFolder.GetDirectorie ...

  9. BootStrap【二、样式】

    H5文档类型 由于使用了H5和CSS熟悉,需要在文件头引入 移动设备优先 为了对移动设备友好,需要使用标签viewport width=device-width 宽度为设备宽度 height 高度 i ...

  10. 解决docker容器开启端口映射后，会自动在防火墙上打开端口的问题

    在docker中运行第三方服务时,通常需要绑定服务端口到本地主机.但使用 -p 参数进行的端口映射,会自动在iptables中建立规则,绕过firewalld,这对于端口级的黑白名单控制管理是很不利的 ...