基于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与iframe交互实现代码
Dec 24 Javascript
HTTP 304错误的详细讲解
Nov 13 Javascript
jquery动态改变div宽度和高度
Feb 09 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
Bootstrap布局之栅格系统详解
Jun 13 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
js 数组详细操作方法及解析合集
Jun 01 Javascript
前端防止用户重复提交js实现代码示例
Sep 07 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 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
getimagesize获取图片尺寸实例
2014/11/15 PHP
PHP生成制作验证码的简单实例
2016/06/12 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
jquery 3D球状导航的文章分类
2010/07/06 Javascript
JavaScript中的style.display属性操作
2013/03/27 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
调试代码导致IE出错的避免方法
2014/04/04 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
2015/08/26 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
详解Vue 如何监听Array的变化
2019/06/06 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
Vue 数据响应式相关总结
2021/01/28 Vue.js
[03:37]2014DOTA2国际邀请赛 主赛事第一日胜者组TOPPLAY
2014/07/19 DOTA
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
python通过smpt发送邮件的方法
2015/04/30 Python
Python3实现从文件中读取指定行的方法
2015/05/22 Python
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
海量信息软件测试笔试题
2015/08/08 面试题
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
2014全国两会心得体会
2014/03/17 职场文书
领导欢迎词范文
2015/01/26 职场文书