基于JQuery 滑动与动画的说明介绍


Posted in Javascript onApril 18, 2013

jQuery 滑动方法:您可以在元素上创建滑动效果。
slideDown() 向下滑动元素。
slideUp() 向上滑动元素。
slideToggle() 在 slideDown() 与 slideUp() 方法之间进行切换。

$(selector).slide(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。

jQuery 动画 - jQuery animate() 方法用于创建自定义动画。
语法:
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的CSS 的 position 属性设置为 relative、fixed 或 absolute。
jQuery animate() - 能够操作多个属性
如果需要生成颜色动画,您需要从 jQuery.com 下载 Color Animations 插件。
jQuery animate() - 使用相对值
也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:

jQuery animate() - 使用预定义的值
您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle":
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});

jQuery animate() - 使用队列功能
默认地,jQuery 提供针对动画的队列功能。
这意味着如果在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

ex1,ex2

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果,在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此,默认地,stop() 会清除在被选元素上指定的当前动画。

Javascript 相关文章推荐
javascript 写类方式之四
Jul 05 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 Javascript
JS中获取函数调用链所有参数的方法
May 07 Javascript
js鼠标点击图片切换效果实现代码
Nov 19 Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 Javascript
在vue项目中安装使用Mint-UI的方法
Dec 27 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
javascript自定义日期比较函数用法示例
Jul 22 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 #Javascript
基于JQuery 选择器使用说明介绍
Apr 18 #Javascript
关于jquery css的使用介绍
Apr 18 #Javascript
js字符串转换成xml对象并使用技巧解读
Apr 18 #Javascript
jQuery使用技巧简单汇总
Apr 18 #Javascript
document.documentElement的一些使用技巧
Apr 18 #Javascript
JQuery 图片的展开和伸缩实例讲解
Apr 18 #Javascript
You might like
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
php实用代码片段整理
2016/11/12 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
jquery div拖动效果示例代码
2013/12/08 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
2017/09/02 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
matplotlib在python上绘制3D散点图实例详解
2017/12/09 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2020/03/12 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
HTML5地理定位实例
2014/10/15 HTML / CSS
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
化工机械应届生求职信
2013/11/04 职场文书
架构师岗位职责
2013/11/18 职场文书
大学毕业自我评价
2014/02/02 职场文书
产品设计开发计划书
2014/05/07 职场文书
美术课外活动总结
2014/07/08 职场文书
主持人开场白台词
2015/05/29 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript
pytorch model.cuda()花费时间很长的解决
2021/06/01 Python