基于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的手风琴图片展示效果实现方法
Dec 16 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
JavaScript中exec函数用法实例分析
Jun 08 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
js实现日历与定时器
Feb 22 Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 Javascript
layui 弹出层值回传解决方式
Nov 14 Javascript
详解JS预解析原理
Jun 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
萌王史莱姆”萌王性别尴尬!那“萌战”归女组还是男?
2018/12/17 日漫
php中数据的批量导入(csv文件)
2006/10/09 PHP
php全局变量和类配合使用深刻理解
2013/06/05 PHP
PHP stream_context_create()函数的使用示例
2015/05/12 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
js代码实现微博导航栏
2015/07/30 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
jquery分页插件pagination使用教程
2018/10/23 jQuery
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
详解Vue中的scoped及穿透方法
2019/04/18 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
[01:09]DOTA2次级职业联赛 - 99战队宣传片
2014/12/01 DOTA
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
详解Python中如何写控制台进度条的整理
2018/03/07 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
python支持多线程的爬虫实例
2019/12/21 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
init进程的作用
2012/04/12 面试题
六月份红领巾广播稿
2014/02/03 职场文书
挂靠协议书范本
2014/04/22 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android