JQuery动画之滑入滑出动画
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动画之滑入滑出动画的更多相关文章
- 【jquery隐藏、显示事件and提示callback】【淡入淡出fadeToggle】【滑入滑出slideToggle】【动画animate】【停止动画stop】
1.jquery隐藏and显示事件 $("p").hide(); //隐藏事件$("p").hide(1000); //1秒内缓慢隐藏$(" ...
- 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...
- jQuary总结7:动画操作,显示与隐藏 淡入淡出, 滑入滑出
1 jquery提供了三组基本动画,这些动画都是标准的.有规律的效果,jquery还提供了自定义动画的功能. 2 显示与隐藏: show([speed],[easing],[callback]) 显示 ...
- css transition 实现滑入滑出
transition是css最简单的动画. 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!! 但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办? ...
- 三角函数与缓入缓出动画及C#实现(图文讲解)
日常经常能看到缓入缓出的动画效果,如: 1,带缓入缓出效果的滚动条: 2,带缓入缓出效果的呼吸灯: 像上面这种效果,就是用到了三角函数相关的知识,下面将从头开始一步步去讲解如何实现这种效果. 一.基础 ...
- 伴随ListView、RecyclerView、ScrollView滚动滑入滑出小图标--第三方开源--FloatingActionButton
FloatingActionButton在github上的项目主页是:https://github.com/makovkastar/FloatingActionButton 它的依赖包NineOldA ...
- WPF技术触屏上的应用系列(五): 图片列表异步加载、手指进行缩小、放大、拖动 、惯性滑入滑出等效果
原文:WPF技术触屏上的应用系列(五): 图片列表异步加载.手指进行缩小.放大.拖动 .惯性滑入滑出等效果 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统, ...
- div层的滑入滑出实例
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head runat=&quo ...
- js窗口边缘滑入滑出效果-初级代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Thinkphp解决phpExcel导出数据量大导致内存溢出
工作需要导出几万的数据量.操作比较频繁.之前数据在七八千是数据导出很慢.phpExcel是方便但是性能一般.现在改为使用csv导出数据:可以缓解内存压力,一次导出两三万是没问题的.当然服务器内存给力, ...
- Spring、SpringMVC版本及配置
一.Spring版本 Spring的最新版本是Spring 5.x,Spring 4.x的最后版本是Spring 4.3.x,会维护到2020年(Spring的GitHub主页对此有说明). 二.Sp ...
- 浅谈hashcode
哈希表这个数据结构想必大多数人都不陌生,而且在很多地方都会利用到hash表来提高查找效率.在Java的Object类中有一个方法: 1 public native int hashCode(); 根据 ...
- java7:核心技术与最佳实践读书笔记——类加载
流程:class -> 加载 -> jvm虚拟机 -> 链接 . 一.类加载器概述 1.引出 类加载器也是一个java类,java.lang.ClassLoader类是所 ...
- C# enum枚举知识总结
C#中除了简单的变量类型外,还提供了三种较为复杂的变量类型,包括枚举.结构和数组.本文主要讲述枚举相关的知识. 枚举类型(也称为枚举),提供了一种有效的方式,来定义可能分配给变量的一组已命名的整数常量 ...
- 微信小程序异步回调
场景如下:现有一个方法需要等待其他N个异步函数执行完毕后执行,callback麻烦的头大,翻了一波API原来小程序已经支持 async函数,那一切就好办了. 废话不多说,直接开始撸... 第一步:打开 ...
- JavaScript 的查询机制——LHS 与 RHS
JavaScript 引擎在查找一个变量的时候,有两种查找机制:LHS 和 RHS. RHS 的查询是简单地查找到某个变量的值,而 LHS 则是试图找到变量的容器的本身. 一个简单的例子:当我们执行 ...
- MongoDB divide 使用之mongotempalte divide
需求:求一组数的两个字段计算结果的平均值 如有一组这样的数: 列名1 列名2 列名3 第一组数 a 2 5 第二组数 b 4 8 按照列名1分组 ...
- 处理Android键盘覆盖input和textarea框的问题
$(window).resize(function(){ $('input[type="text"],textarea').on('click', function () { va ...
- 接收端通过Request.InputStream读取流
以下有两种方式可以获取响应的数据流 1. 接收端通过Request.InputStream读取流 public static string StreamRead() { byte[] byts = n ...