基于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 相关文章推荐
JQuery设置和去除disabled属性的5种方法总结
May 16 Javascript
AJAX跨域请求json数据的实现方法
Nov 11 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 Javascript
AngularJS 2.0新特性有哪些
Feb 18 Javascript
javascript正则表达式之分组概念与用法实例
Jun 16 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
js生成随机数方法和实例
Jan 17 Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
javascript自定义右键菜单插件
Dec 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
oracle资料库函式库
2006/10/09 PHP
php中使用redis队列操作实例代码
2013/02/07 PHP
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
javascript学习之闭包分析
2010/12/02 Javascript
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
Javascript基础回顾之(二) js作用域
2017/01/31 Javascript
Node.js的特点详解
2017/02/03 Javascript
基于JQuery的Ajax方法使用详解
2017/08/16 jQuery
javascript代码优化的8点总结
2018/01/29 Javascript
vue结合axios与后端进行ajax交互的方法
2018/07/06 Javascript
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
python实现绘制树枝简单示例
2014/07/24 Python
总结python实现父类调用两种方法的不同
2017/01/15 Python
Python 中Pickle库的使用详解
2018/02/24 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
详解Python中的正则表达式
2018/07/08 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
python英语单词测试小程序代码实例
2019/09/09 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
教师演讲稿开场白
2014/08/25 职场文书
留学推荐信中文范文
2015/03/26 职场文书
2015党建工作简报
2015/07/21 职场文书
JS数组方法some、every和find的使用详情
2021/10/05 Javascript