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. 训练技巧详解【含有部分代码】Bag of Tricks for Image Classification with Convolutional Neural Networks

    训练技巧详解[含有部分代码]Bag of Tricks for Image Classification with Convolutional Neural Networks 置顶 2018-12-1 ...

  2. win10下搭建vue开发环境

    特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图:     详细的安装步骤如下: 一.安装node.js 说明:安装node.js的windows版本后 ...

  3. 【ES6 】ES6 解构赋值--函数参数解构赋值

    函数的参数也可以使用解构赋值. function add([x, y]){ return x + y; } add([1, 2]); 上面代码中,函数add的参数表面上是一个数组,但在传入参数的那一刻 ...

  4. 【Android】二、HelloWorld

    1. 按照该网址写HelloWorld 例子   http://www.runoob.com/android/android-hello-world-example.html 2.点击 make pr ...

  5. js重点——作用域——简单介绍(一)

    一.作用域 定义:在js中,作用域为变量,对象,函数可访问的一个范围. 分类:全局作用域和局部作用域 全局作用域:全局代表了整个文档document,变量或者函数在函数外面声明,那它的就是全局变量和全 ...

  6. vue学习（8）-过渡transition&动画animate

      进入之前                                                    离开之后 v-enter---v-enter-to            v-lea ...

  7. swagger 的使用

    最近在用 .Net Core 做项目 了解到swagger 是一个不错的工具 简单介绍一下 在使用asp.net core 进行api开发完成后,书写api说明文档对于程序员来说想必是件很痛苦的事情吧 ...

  8. C# 填充无效，无法被移除

    1.本文采用微软的 RijndaelManaged 命名空间: System.Security.Cryptography Assemblies: mscorlib.dll, netstandard.d ...

  9. yum list报一些error的组件

    1 删除那些无效的参数配置,就不再报错了

  10. git提交失败总结

    在用Git管理代码版本时,用git push命令提交代码,提示: [错误1] 错误原因:后来发现是提交大文件导致http postbuffer溢出,将postbuffer改大就可以了 解决办法:git ...