基于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 相关文章推荐
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
JAVASCRIPT  THIS详解 面向对象
Mar 25 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
Oct 31 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 Javascript
深入理解React高阶组件
Sep 28 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
详解小程序输入框闪烁及重影BUG解决方案
Aug 31 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 Javascript
LayUI数据接口返回实体封装的例子
Sep 12 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
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
对于Python的Django框架部署的一些建议
2015/04/09 Python
Python中super关键字用法实例分析
2015/05/28 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
Django ORM多对多查询方法(自定义第三张表&ManyToManyField)
2019/08/09 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
KEEN美国官网:美国人气户外休闲鞋品牌
2021/03/09 全球购物
服装设计专业毕业生推荐信
2013/11/09 职场文书
应聘编辑职位自荐信范文
2014/01/05 职场文书
学生会招新策划书
2014/02/14 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
感恩教育月活动总结
2014/07/07 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
Java如何实现树的同构?
2021/06/22 Java/Android