基于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 相关文章推荐
javascript call和apply方法
Nov 24 Javascript
深入认识javascript中的eval函数
Nov 02 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
JavaScript使用循环和分割来替换和删除元素实例
Oct 13 Javascript
Angular2自定义分页组件
Apr 19 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 Javascript
微信小程序实现选择地址省市区三级联动
Jun 21 Javascript
vue 如何使用递归组件
Oct 23 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中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
coreseek 搜索英文的问题详解
2013/06/08 PHP
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
php实现webservice实例
2014/11/06 PHP
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
D3.js实现散点图和气泡图的方法详解
2016/09/21 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
对于Python中线程问题的简单讲解
2015/04/03 Python
从头学Python之编写可执行的.py文件
2017/11/28 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
Python实现FLV视频拼接功能
2020/01/21 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
运动会广播稿200米
2014/01/27 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers