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. 以太坊再爆高危漏洞！黑客增发ATN 1100万枚token事件始末

    事情发生在5月中旬,ATN技术人员发现Token合约由于存在漏洞受到攻击.不过ATN基金会随后透露,将销毁1100万个ATN,并恢复ATN总量,同时将在主链上线映射时对黑客地址内的资产予以剔除,确保原 ...

  2. php操作string的函数

    函数库来源于:http://www.w3school.com.cn/php/php_ref_string.asp 我常用的 echo()------------输出一个或多个字符串. 如:echo ' ...

  3. C#签名验签帮助类

    using System; using System.IO; using System.Text; using System.Collections.Generic; using System.Sec ...

  4. [NOIP10.6模拟赛]2.equation题解--DFS序+线段树

    题目链接: 咕 闲扯: 终于在集训中敲出正解(虽然与正解不完全相同),开心QAQ 首先比较巧,这题是\(Ebola\)出的一场模拟赛的一道题的树上强化版,当时还口胡出了那题的题解 然而考场上只得了86 ...

  5. wrbstrom使用

    使用webstrom时遇到Firefox浏览器打不开问题,是webstrom未找到你Firefox的安装路径下面为大家提供解决方法: 文件--->设置--->工具--->web浏览器 ...

  6. Javascript简单教程汇总

    什么是函数 一段定义好的代码,并可以反复使用的代码块 函数的作用 提升代码的可复用性,将一段代码进行预定义,需要使用的时候才触发 代码块 形成了一个相对独立的作用域 语法: function  函数名 ...

  7. css样式背景图片设置缩放

    一.背景颜色图片平铺 background-color 背景颜色 background-image 背景图片地址 background-repeat 是否平铺 默认是平铺 background-pos ...

  8. 微信小程序上传图片更新图像

    解决思路: 1. 调用wx.chooseImage 选择图片 2.wx.uploadFile 上传图片 3.调用后台接口进行修改操作 修改原来的头像 wx.chooseImage({ success: ...

  9. sql 创建新表时的完成格式

    1 create table [dbo].[Customer] ( CustomerID int identity(1,1) not null, [Name] [nvarchar](50) null, ...

  10. spring boot 的一些高级用法

    1 spring boot 项目的创建 参考 https://www.cnblogs.com/PerZhu/p/10708809.html 2 首先我们先把Maven里面的配置完成 <depen ...