基于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 相关文章推荐
JS对URL字符串进行编码/解码分析
Oct 25 Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
JavaScript 保存数组到Cookie的代码
Apr 14 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 Javascript
javascript中json对象json数组json字符串互转及取值方法
Apr 19 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 Javascript
ES6模块化的import和export用法方法总结
Aug 08 Javascript
bootstrap-Treeview实现级联勾选
Nov 23 Javascript
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
React styled-components设置组件属性的方法
Aug 07 Javascript
微信小程序云开发之模拟后台增删改查
May 16 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
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
PHP array_multisort()函数的使用札记
2011/07/03 PHP
PHP 获取文件权限函数介绍
2013/07/11 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
9个JavaScript评级/投票插件
2010/01/18 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
JS实现百度搜索框
2021/02/25 Javascript
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
用Python给文本创立向量空间模型的教程
2015/04/23 Python
python数据结构之图的实现方法
2015/07/08 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
光电信息专业应届生求职信
2013/10/07 职场文书
校园餐饮创业计划书
2014/01/10 职场文书
2014年环卫工作总结
2014/11/22 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
小班下学期个人总结
2015/02/12 职场文书
2015年技术员工作总结
2015/04/10 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
如何写好开幕词?
2019/06/24 职场文书
Python os和os.path模块详情
2022/04/02 Python