Animate自定义动画
在jQuery中出了基本的动画之外，还有用户 可以自定义的函数,Animate()
用于创建自定义动画的函数。
apI上指出：
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。
在 jQuery 1.2 中，你可以使用 em 和 % 单位。另外，在 jQuery 1.2 中，你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。
jQuery 1.3中，如果duration设为0则直接完成动画。而在以前版本中则会执行默认动画。
paramsOptions
一组包含作为动画属性和终值的样式属性和及其值的集合
duration (可选)String,Number
三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing (可选)String
要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
callback (可选)Function
在动画完成时执行的函数
<script src="js/jQuery1.11.1.js" type="text/javascript"></script>
<script>
$(function () {
$("p").click(function () { //点击显示图片 $("img").animate({ width: "20%" }, 2000) //图片2秒后展示图片宽度 .animate({ height: "30%" }); //执行完第一个animate才会执行第一个 }); });
</script>
</head>
<body>
<p>点击显示</p>
<img src="data:images/6.jpg" style="display:none"/> </body>
A： 也可以使用queue关键字让每个属性同时进行
$("p").click(function () { //点击显示图片
$("img").animate({ width: "20%" }, 2000) //图片2秒后展示图片宽度
.animate({ height: "30%" },{queue:false,duration:2000}); //这样width和height属性 就会同时产生动画效果
});
B：
在600毫秒内切换段落的高度和透明度
jQuery 代码:
$("img").animate({
height: 'toggle', opacity: 'toggle'
}, "slow");
C:
用600毫秒将段落移到left为50的地方并且完全清晰显示出来（透明度为1）
jQuery 代码:
$("img").animate({
left: 150, opacity: 'show'
}, 600
);
Animate自定义动画的更多相关文章
- jQuery中关于如何使用animate自定义动画
动画 animate() 01.animate()方法的简单使用 有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就是强大的animate方法了. 操作一个元素执行3秒的淡入动画,对比下一 ...
- 自定义动画animate()
在上一节总结了一下3中类型的动画,其中show()和hide()方法会同时修改元素的多个属性,fadeOut()和fadeIn()方法只会修改元素的不透明度,而slideDown()和slideUp( ...
- js进阶 13-4 jquery自定义动画animate()如何使用
js进阶 13-4 jquery自定义动画animate()如何使用 一.总结 一句话总结:animate(params,[speed],[easing],[fn]),参数:params:一组包含作为 ...
- 利用自定义动画 animate() 方法，实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时，停止滚动，鼠标移开时，继续滚动
查看本章节 查看作业目录 需求说明: 利用自定义动画 animate() 方法,实现某图书网站中"近 7 日畅销榜"中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠 ...
- Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析
这是关于RecyclerView的第二篇,说的是如何自定义Item动画,但是请注意,本文不包含动画的具体实现方法,只是告诉大家如何去自定义动画,如何去参考源代码. 我们知道,RecyclerView默 ...
- 深入学习jQuery自定义动画
× 目录 [1]属性对象 [2]可选参数 [3]选项参数 前面的话 很多情况下,前面介绍的jQuery动画的简单效果无法满足用户的各种需求,那么就需要对动画有更多的限制,需要采取一些高级的自定义动画来 ...
- Android 动画效果 及 自定义动画
1. View动画-透明动画效果2. View动画-旋转动画效果3. View动画-移动动画效果4. View动画-缩放动画效果5. View动画-动画效果混合6. View动画-动画效果侦听7. 自 ...
- Android 5.0自定义动画
材料设计中的动画对用户的操作给予了反馈,并且在与应用交互时提供了持续的可见性.材料主题提供了一些按钮动画和活动过渡,Android 5.0允许你自定义动画并且可以创建新的动画: Touch Feedb ...
- iOS 8自定义动画转场上手指南
原文:http://www.cocoachina.com/ios/20150126/11011.html iOS 5发布的时候,苹果针对应用程序界面的设计,提出了一种全新的,革命性的方法—Storyb ...
随机推荐
- IOS开发－ObjC－NSString
NSString是oc语言Foundation框架中常用的类,我根据每个方法的功能将NSString的常用方法分为创建字符串.初始化字符串.判断和比较字符串.大写和小写相互转化.字符串的截取.类型转换 ...
- css强制折行和隐藏超出部分
一.强制换行1 word-break: break-all; 只对英文起作用,以字母作为换行依据. 2 word-wrap: break-word; 只对英文起作用,以单词作为换行依据. 3 whit ...
- MVC笔记3:JQuery AutoComplete组件
1.引入以下js和css <link href="@Url.Content("~/Content/Site.css")" rel="styles ...
- 高仿xx教育网
2014年2月26日 16:24:50 好久没做 php了,考虑到老婆是教育行业,高仿一个教育辅导机构的网站 加油
- Nodejs之目录介绍及app.js说明
nodejs目录说明,app.js简单介绍及如何设置app.js启动项目. 新建的项目结构应该是这样 bin:项目的启动文件,也可以放其他脚本. node_modules:用来存放项目的依赖库. pu ...
- Java数据库连接--JDBC调用存储过程，事务管理和高级应用
相关链接:Jdbc调用存储过程 一.JDBC常用的API深入详解及存储过程的调用 1.存储过程的介绍 我们常用的操作数据库语言SQL语句在执行的时候要先进行编译,然后执行,而存储过程是在大型数据库系统 ...
- EditText的功能与用法
EditText与TextView非常相似,它甚至与TextView共用了绝大部分XML属性和方法.EditText和TextView的最大区别在于:EditText可以接受用户输入. EditTex ...
- puppet来管理文件和软件包
puppet来管理文件和软件包 1 exec的使用,可以运行shell命令 为配置文件添加配置,指示写了关键部分,其他配置省略没写 代码示例如下: [root@pup manifests]# cat ...
- UWP必备知识：App File Explorer
由来 应用在手机端出问题时如果查看LocalState文件夹的数据库文件与日志文件 如何查看应用在手机端占用带宽与占用CPU内存情况 介绍 [UWP开发之Mvvmlight实践七:如何查找设备(Mob ...
- 【The Most Important】浅谈JSP表单Post方式中文乱码问题
首先祝大家鸡年吉祥!在这里我要说下这两天里这个问题困扰着我,大过年的心情都被烦扰的不好了,所以我带着兴奋的心情来赶快完成这篇博客,解决大家的问题.我的问题是post方式传递表单数据,Tomcat服务器 ...