js进阶 13-2 jquery动画滑动效果哪些注意事项
js进阶 13-2 jquery动画滑动效果哪些注意事项
一、总结
一句话总结:滑动里面这里up是隐藏,down是显示。
1、jquery动画默认的两个切换效果是什么(swing默认和linear的区别是什么)?
swing默认和linear,和css里面默认的效果相比少一点
linear,是匀速运动
swing是先慢后快
2、jquery动画如果想使用更多的切换效果,需要怎么办?
需要用插件
3、滑动效果的三个函数和显示隐藏的三个函数有什么异同?
都是三个,参数都是一样,这里是up,down,toggle
这里up是隐藏,down是显示
二、jquery动画滑动效果哪些注意事项
1、滑动
滑动效果也是比较常见的动画效果,比如我们常见的具有滑动效果的下拉菜单
- slideDown():通过调整高度来滑动显示被选元素
语法:$(selector).slideDown([speed],[easing],[fn])
- slideUp():通过调整高度来滑动隐藏被选元素
语法:$(selector),slideUp[speed,[easing],[fn]])
- slideToggle()通过高度变化来切换所有匹配元素的可见性。
语法:$(selector).slideToggle([speed],[easing],[fn])
- 参数说明:
1.speed:三种预定速度之一的字符串("slow","normal",or"fast")或表示动画时长的毫秒数值(如:1000)
2. easing:(Optional)用来指定切换效果, 默认是"swing",可用参数"linear""
3. fn:在动画完成时执行的函数,每个元素执行一次。
2、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style type="text/css">
input{width: 100px;height: 30px;}
#div1,#div2,#div3{width: 150px;height: 150px;border:1px solid green;margin-left: 15px;display: inline-block;}
</style>
</head>
<body>
<h3>jQuery动画效果</h3>
<input id="btn1" type="button" value="slideDown">
<input id="btn2" type="button" value="slideUp">
<input id="btn3" type="button" value="slideToggle"><br><br>
<div id="div1"></div><div id="div2"></div><div id="div3"></div>
<script>
// $('#btn3').click(function(){
// $('#div1').toggle(5000,'linear')
// $('#div2').toggle(5000,'swing')
// $('#div3').toggle(5000)
// })
$('#btn1').click(function(){
$('#div1').slideDown(1000)
$('#div2').slideDown(2000)
$('#div3').slideDown(3000)
})
$('#btn2').click(function(){
$('div').slideUp()
})
$('#btn3').click(function(){
$('div').slideToggle()
})
</script>
</body>
</html>
js进阶 13-2 jquery动画滑动效果哪些注意事项的更多相关文章
- js进阶 13 jquery动画函数有哪些
js进阶 13 jquery动画函数有哪些 一.总结 一句话总结: 二.jquery动画函数有哪些 原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性.通过jQuery,我们使用简 ...
- js进阶 13-11/12 jquery如何实现折叠导航
js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...
- jquery左右滑动效果的实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js进阶---12-12、jquery事件委托怎么使用
js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...
- js进阶---12-10、jquery绑定事件和解绑事件是什么
js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...
- js进阶 13-9/10 jquery如何实现三级列表
js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...
- WOW.js轻松为网页添加动画切入效果
由于坐忘的需要,经常会有部分功能用的很多,做起来又很繁琐,所以插件也就应运而生了.个人感觉正式js强大的可植入性, 才使他如此的使用火爆,反正博主是特别喜欢这一点 Y(^o^)Y~ . 今天就和大家 ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- js进阶课程 12-9 jquery的事件对象event的方法有哪些?
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
随机推荐
- 高效的TCP数据拆包器
高效的TCP数据拆包器 接收器,每秒拆1KB的包达到30万以上 /// 数据同步协义数据接收器 /// </summary> /// <remarks> /// 主要功能有 / ...
- Vectorized implementation
Vectorization Vectorization refers to a powerful way to speed up your algorithms. Numerical computin ...
- Boot_Strap基础
1.数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding).如: <div class="container"> ...
- HDU 4007 Dave(离散化)
Dave Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65768/65768 K (Java/Others)Total Submis ...
- syslog日志介绍
一. syslog简介 syslog是一种工业标准的协议,可用来记录设备的日志.在UNIX系统,路由器.交换机等网络设备中,系统日志(System Log)记录系统中任何时间发生的大小事件.管理者可以 ...
- BZOJ 1696 [Usaco2007 Feb]Building A New Barn新牛舍 数学
题意:链接 方法:数学+模拟 解析: 首先这类问题不是第一次见了,所以直接知道拿x的中位数.y的中位数. 这题就是讨论情况很的烦. 题中有个限制,给出待求和的点不能选取. 所以假设奇数个点,求出x中位 ...
- 通过wireshark,以及python代码收发邮件,了解smtp协议,pop协议工作过程
40返回连接server成功 41.43发送ehlo命令查询server支持命令 返回250 44.46请求认证 server响应235认证成功 47.49发送mail命令发送者邮箱 返回250 ...
- ubuntu-虚拟机分辨率设定
前两天下载的虚拟机,一直调节不好分辨率,就是说,全屏的时候,虚拟机要么是不能充满屏幕,要么就是在屏幕充满的时候,会出现显示不全,需要滚动条,给人的体验非常的不好.自己调节了好长时间都没有刚好合适的尺寸 ...
- Day2二分图笔记
定义 左边一堆点 右边一堆点 树是一个二分图,奇数深度和偶数深度可以组成二分图, 二分图匹配 左边的点和右边的点有边 匈牙利算法 可能的答案 ans,n-ans,m-ans,n+m-ans || ...
- 关于Webpack详述系列文章 (第一篇)
WebPack官网地址(https://webpack-china.org/) 1. 什么是WebPack WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript ...