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. 分布式session一致性问题

    1.分布式session一致性 :指服务器集群情况下session共享的问题. 2.session的作用:保存服务器(tomcat)与客户端(浏览器)整个通讯的会话基本信息. 3.session应用场 ...

  2. docker 入门5 - 栈 【翻译】

    入门,第 5 部分:堆栈 先决条件 安装 Docker 版本 1.13 或更高版本. 获取第 3 部分先决条件中所述的 Docker Compose. 获取 Docker Machine,如第 4 部 ...

  3. 7-MySQL DBA笔记-研发规范

    第7章 研发规范 本章将为读者解读一份研发规范.为了更好地协同工作和确保所开发的应用尽可能的稳定.高效,建立一套数据库相关的研发规范是很有必要的,虽然研发规范的确立和推广是一项很耗时的工作,但所取得的 ...

  4. LINQ 多条件join on

    var  tmp = from a in DT1.AsEnumerable() join b in DT2.AsEnumerable() on new { bm = a.Field<string ...

  5. C# 连接 Socks5 代理

    public class Socks5ProxyHelp { private Socks5ProxyHelp() { } public static string[] errorMsgs = { &q ...

  6. USB相关资料汇总

    [1]USB规范,一切的一切,基本的基本,天书级别USB_11_spec(中文).pdf    USB1.1规范(中文版) usb_20.pdf                     USB2.0规 ...

  7. python现状

    自从官方宣布 2020 年 1 月后不再更新维护 Python2,已经有一大批开源软件将其抛弃.今天,抛弃 Python2 的名单上又多了一个重磅软件.Python2 是 Python 官方在 200 ...

  8. python打印菱形

    1.分析:首先python,我们分析了菱形的成分.双喜鸟seo输入2时,打印三行菱形:输入3时,打印五行菱形.也就是说,根据输入数字A,打印第2a-1行的菱形.菱形由一个三角形和一个倒三角形组成,两个 ...

  9. 利用python3 爬取 网易云 上 周杰伦所有专辑，歌曲，评论，并完成可视化分析已经歌曲情绪化分析

    这篇文章适合于python爱好者,里面可能很多语句是冗长的,甚至可能有一些尚未发现的BUG,这个伴随着我们继续学习来慢慢消解吧.接下来 我把里面会用到的东西在这里做一个简单总结吧:本文用到了两门解释性 ...

  10. vue父组件传值和子组件触发父组件方法

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <scr ...