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动画滑动效果哪些注意事项的更多相关文章

  1. js进阶 13 jquery动画函数有哪些

    js进阶 13 jquery动画函数有哪些 一.总结 一句话总结: 二.jquery动画函数有哪些 原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性.通过jQuery,我们使用简 ...

  2. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

  3. jquery左右滑动效果的实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  5. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  6. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  7. WOW.js轻松为网页添加动画切入效果

    由于坐忘的需要,经常会有部分功能用的很多,做起来又很繁琐,所以插件也就应运而生了.个人感觉正式js强大的可植入性, 才使他如此的使用火爆,反正博主是特别喜欢这一点  Y(^o^)Y~ . 今天就和大家 ...

  8. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  9. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

随机推荐

  1. JavaScript提高：006：ASP.NET使用easyUI TABS标签updatepanel

    前文使用了easyui的tab标签.切换问题,使用了session保存当前选中页,然后页面总体刷新时再切换至上次保存页码.那么使用updatepanel后,这个问题就非常好攻克了.http://blo ...

  2. PAT-中国大学MOOC-陈越、何钦铭-数据结构基础习题集 00-自測4. Have Fun with Numbers (20) 【二星级】

    题目链接:http://www.patest.cn/contests/mooc-ds/00-%E8%87%AA%E6%B5%8B4 题面: 00-自測4. Have Fun with Numbers ...

  3. IIS文件上传大小修改配置说明

    原因:Web 服务器上的请求筛选被配置为拒绝该请求,因为内容长度超过配置的值(IIS 7 默认文件上传大小时30M). 解决:IIS7更改asp.net文件上传大小限制 步骤如下: 1.    修改I ...

  4. Kinect 开发 —— 控制PPT播放

    实现Kinect控制幻灯片播放很简单,主要思路是:使用Kinect捕捉人体动作,然后根据识别出来的动作向系统发出点击向前,向后按键的事件,从而使得幻灯片能够切换. 这里的核心功能在于手势的识别,我们在 ...

  5. c# for 和 foreach

    1给定长度 不需要计算长度的 for比foreach循环效率高 2 在不确定长度 或者计算长度有性能损耗的时候 用foreach比较方便 2336 循环语句是编程的基本语句,在C#中除了沿用C语言的循 ...

  6. cap理论理解

    一个分布式系统里面,节点组成的网络本来应该是连通的.然而可能因为一些故障,使得有些节点之间不连通了,整个网络就分成了几块区域.数据就散布在了这些不连通的区域中.这就叫分区. 当你一个数据项只在一个节点 ...

  7. 辛星跟您玩转vim第三节之程序猿特须要的移动方式

    前面第二节我首先值得一提的是,我的vim教程pdf版本号已经写完了.大家能够去下载,这里是csdn的下载地址:csdn下载.假设左边的下载地址挂掉了.也能够自行在浏览器以下输入例如以下地址进行下载:h ...

  8. 计蒜客 429(腾讯手机地图-pi的精确值)

    腾讯手机地图的定位功能用到了用户手机的多种信号.这当中有的信号的作用范围近.有的信号作用的范围则远一些.有的信号相对于用户在不同的方位强度是不同的.有的则是在不论什么一个方向上信号强度都一致的. 已知 ...

  9. BZOJ 1696 [Usaco2007 Feb]Building A New Barn新牛舍 数学

    题意:链接 方法:数学+模拟 解析: 首先这类问题不是第一次见了,所以直接知道拿x的中位数.y的中位数. 这题就是讨论情况很的烦. 题中有个限制,给出待求和的点不能选取. 所以假设奇数个点,求出x中位 ...

  10. Dcloud课程8 开心一刻应用如何实现

    Dcloud课程8 开心一刻应用如何实现 一.总结 一句话总结:app就是远程调用接口获得数据,我们在后台要做的,就是写一个个让页面获得接口的数据.这里用的是公共笑话接口. 1.ajax返回给页面的h ...