基于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 相关文章推荐
js获取div高度的代码
Aug 09 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
JS构建页面的DOM节点结构的实现代码
Dec 09 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
JavaScript中ES6字符串扩展方法
Aug 26 Javascript
vue.js 初体验之Chrome 插件开发实录
May 13 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
vue项目动态设置页面title及是否缓存页面的问题
Nov 08 Javascript
详解ES6 Promise的生命周期和创建
Aug 18 Javascript
vue制作toast组件npm包示例代码
Oct 29 Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
Jun 02 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学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
通过PHP实现用户注册后邮箱验证激活
2020/11/10 PHP
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
JS使用Prim算法和Kruskal算法实现最小生成树
2019/01/17 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
js实现验证码功能
2020/07/24 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
Python输出9*9乘法表的方法
2015/05/25 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
基于python实现获取网页图片过程解析
2020/05/11 Python
10个顶级Python实用库推荐
2021/03/04 Python
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
小学家长会邀请函
2014/01/23 职场文书
销售职业生涯规划范文
2014/03/14 职场文书
学习保证书范文
2014/04/30 职场文书
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js