基于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 相关文章推荐
神奇的代码 通杀各种网站-可随意修改复制页面内容
Jul 17 Javascript
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
JavaScript学习笔记之JS对象
Jan 22 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
AngularJS 教程及实例代码
Oct 23 Javascript
详解vue-loader在项目中是如何配置的
Jun 04 Javascript
vue devtools的安装与使用教程
Aug 08 Javascript
通过jQuery学习js类型判断的技巧
May 27 jQuery
webpack的 rquire.context用法实现工程自动化的方法
Feb 07 Javascript
google广告之另类js调用实现代码
Aug 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
Zend的MVC机制使用分析(二)
2013/05/02 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
php 比较获取两个数组相同和不同元素的例子(交集和差集)
2019/10/18 PHP
Jquery 绑定时间实现代码
2011/05/03 Javascript
一个简单的js树形菜单
2011/12/09 Javascript
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
JS不间断向上滚动效果代码
2013/12/25 Javascript
js中数组(Array)的排序(sort)注意事项说明
2014/01/24 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
Docker部署Python爬虫项目的方法步骤
2020/01/19 Python
pandas分组聚合详解
2020/04/10 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
UGG英国官方网站:UGG UK
2018/02/08 全球购物
Waterford英国官方网站:世界上最受欢迎的优质水晶品牌
2019/08/17 全球购物
面向对象编程OOP的优点
2013/01/22 面试题
精彩的大学生自我评价
2013/11/17 职场文书
食品安全检查制度
2014/02/03 职场文书
2014全国两会大学生学习心得体会
2014/03/10 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
团代会开幕词
2015/01/28 职场文书
联谊活动总结范文
2015/05/09 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书