基于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中height与width
Jul 06 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
超漂亮的jQuery图片轮播特效
Nov 24 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
Javascript中的async awai的用法
May 17 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 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
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
浅析javascript 定时器
2014/12/23 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
2016/02/27 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
js放到head中失效的原因与解决方法
2017/03/07 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
Python定义一个跨越多行的字符串的多种方法小结
2018/07/19 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
Python3开发实例之非关系型图数据库Neo4j安装方法及Python3连接操作Neo4j方法实例
2020/03/18 Python
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
学生学习总结的自我评价
2013/10/22 职场文书
党校学习自我鉴定
2014/02/24 职场文书
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
乱世佳人观后感
2015/06/08 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js