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. kubernetes 水平伸缩及yaml格式编写

    Replication Controller:用来部署.升级PodReplica Set:下一代的Replication ControllerDeployment:可以更加方便的管理Pod和Repli ...

  2. 教你如何进行移动端APP测试

    1.安全测试(权限) 1)软件权限:其中包括发送信息,拨打电话,链接网络,访问手机信息,联系人信息等等 2)数据在本地的存储.传输等 3)执行某些操作时导致的输入有效性验证.授权.数据加密等方面 4) ...

  3. ‘mysql’不是内部或外部命令，也不是可运行的程序--解决方法

    一.场景 在cmd命令窗口下操作mysql时,提示mysql不是内部或外部命令,也不是可运行的程序. 二.原因 有3种原因: 1.没有装mysql 2.没有配置mysql环境变量 3.cmd命令窗口没 ...

  4. wpf win10 popup位置偏移问题

    同样问题参照: https://stackoverflow.com/questions/18113597/wpf-handedness-with-popups 解决方案: private static ...

  5. xss part2

    0x01 xss challenge level 6-10 1.1 level 6 test with typical, notice the script has changed change sc ...

  6. 处理器拦截器（HandlerInterceptor）详解(转)

    简介 SpringWebMVC的处理器拦截器,类似于Servlet开发中的过滤器Filter,用于处理器进行预处理和后处理. 应用场景 1.日志记录,可以记录请求信息的日志,以便进行信息监控.信息统计 ...

  7. 14.JdbcUtils框架

    1.编写自己的JdbcUtils 框架 2.使用 dbUtils 框架 1.视频中自己编写的JdbcUtils框架差不多就是dbUtils框架 2.使用 使用dbutils框架完成curd,以及批处理 ...

  8. VIM从原理上认识^M问题

    问题背景 VIM在打开文件的时候如果遇到两种换行符风格(dos与unix)共存的文件,通常会在行尾显示出烦人的^M.如果^M较少,比较容易定位到哪几行出了问题,但是如果^M较多,就很难搞.下面先给出解 ...

  9. Shell中比较判断

    一.shell判断数组中是否包含某个元素:ary=(1 2 3)a=2if [[ "${ary[@]}" =~ "$a" ]] ; then    echo & ...

  10. 【wlan】iw命令集合

    查看所连接的客户端的个数和信息 iw dev wlan0 station dump root@OpenWrt:~# iw dev wlan0 station dump Station e0:ac:cb ...