JQuery简单动画效果的发生顺序和animate方法
(1)在同一组元素上的效果
- 当在一个.animate()方法中以多个属性的方式应用时,是同时发生的。
- 当以方法连缀的形式应用时,是按顺序发生的(排队效果)---除非queue选项值为false。
(2)多组元素上的效果
- 默认情况下是同时发生的
- 当在另一个效果方法或者在.queue()方法的回调函数中应用时,是按顺序发生的(排队效果)。
关于animate方法,此方法用于创建自定义动画,并且能够规定动画执行时长、擦除效果。动画完成后还可以地触发一个回调函数。
animate方法有两种形式,第一种接受4个参数:
- 一个包含样式属性和值的对象
- 可选的时长参数
- 可选的缓动(easing)类型
- 可选的回调函数
形式如下所示:
.animate({property1: 'value1',property2: 'value2'},duration,easing,function(){});
第二种形式接受两个参数,一个属性对象和一个选项对象:
.animate({properties},{options});
实际上这里的第二个参数是将第一种形式的2-4参数封装在了另一个参数中,同时添加了两个选项。
.animate({
property1: 'value1',
property2: 'value2'
}, {
duration: 'value'
easing: 'value'
complete: function(){},
queue: true,
step: callbakc
});
JQuery简单动画效果的发生顺序和animate方法的更多相关文章
- 第一百七十二节,jQuery,动画效果
jQuery,动画效果 学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 一.显示.隐藏 jQuery 中显示方法为:. ...
- jQuery Easing 动画效果扩展--使用Easing插件,让你的动画更具美感。
jQuery Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- jQuery之动画效果show()......animate()
jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...
- jquery-12 jquery常用动画效果有哪些
jquery-12 jquery常用动画效果有哪些 一.总结 一句话总结:jquery可以用户animate()自定义动画,也可以slide和fade系列方法来设置动画. 1.动画效果如何设置执行时间 ...
- JQuery(二)——简单动画效果
上一篇博客总结了JQuery的一些基本知识,这篇博客重点从JQuery能够制造各种各样的网页效果方面来进行总结.总结一些常见的常用的基本效果的必备方法.从隐藏显示,淡入淡出,滑动,动画等几个方面来简单 ...
- jQuery之简单动画效果
1. show()显示动画 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow",&quo ...
- 【Demo】jQuery 轮播图简单动画效果
功能实现: (1)设定图片称号的鼠标悬停事件: (2)在事件中利用自定义动画函数调整显示图片,并修改对应标号样式: (3)为图片显示区域设定鼠标悬停事件: (4)当鼠标停在该区域时,清除图片切换动画定 ...
- jQuery基础---动画效果
内容摘要: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 发文不易,转载请注明出处~ 一.显示.隐藏 jQuery 中显示方法 ...
随机推荐
- spdlog源码阅读 (1): sinks
0. spdlog简单介绍 spdlog 是一个快速的 C++ 日志库,只包含头文件,兼容 C++11.项目地址 特性: 非常快 只包含头文件 无需依赖第三方库 支持跨平台 - Linux / Win ...
- python自学基础1week
一.python老师介绍 二.为什么要学习python? 三.学习python有前途吗? 疗程1:语言基础 疗程2:网络编程 疗程3:web基础开发 疗程4:算法&设计模式 疗程5:pytho ...
- xgboost-python参数深入理解
由于在工作中应用到xgboost做特征训练预测,因此需要深入理解xgboost训练过程中的参数的意思和影响. 通过search,https://www.analyticsvidhya.com/blog ...
- 我的日志文件java logger
操作读取日志文件, 1.使用默认的日志文件,并验证默认级别 public void originalConfig() { Logger logger = Logger.getLogger(Logger ...
- iOS开发之数据存储之NSData
1.概述 使用archiveRootObject:toFile:方法可以将一个对象直接写入到一个文件中,但有时候可能想将多个对象写入到同一个文件中,那么就要使用NSData来进行归档对象. NSDat ...
- iOS开发之数据存储之Preference(偏好设置)
1.概述 很多iOS应用都支持偏好设置,比如保存用户名.密码.字体大小等设置,iOS提供了一套标准的解决方案来为应用加入偏好设置功能. 每个应用都有个NSUserDefaults实例,通过它来存取偏好 ...
- 使用gem安装jekyll错误记录
准备在windows7上安装Jekyll, 安装好了Ruby和RubyDevKit之后,准备使用: $ gem install jekyll 安装jekyll,但是返回错误: ERROR: While ...
- vuejs模板使用方法
vuejs的模板功能很强大,下面是一些demo <!DOCTYPE html> <html lang="en"> <head> <meta ...
- IOS开发创建开发证书及发布App应用(九)——等待审核(审核几种状态)
以下是App应用的几种状态,如果看不到英文,建议复制到网站翻译一下就行,意思差不多能明白的 以上整套流程是在2013年写的,可能有些地方已经不太一样了,只是给大家做一下参考,毕竟再怎么改大概流程还是差 ...
- HTML5 WebSocket和后端C#通信
1.使用 HTML5 开发离线应用 http://www.ibm.com/developerworks/cn/web/1011_guozb_html5off/ 2.利用html 5 websocket ...