animate(params,[speed],[easing],[fn])

概述

用于创建自定义动画的函数。

这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。

在 jQuery 1.2 中，你可以使用 em 和 % 单位。另外，在 jQuery 1.2 中，你可以通过在属性值前面指定 "<em>+=</em>" 或 "<em>-=</em>" 来让元素做相对运动。

jQuery 1.3中，如果duration设为0则直接完成动画。而在以前版本中则会执行默认动画。jQuery 1.8中，当你使用CSS属性在css()或animate()中，我们将根据浏览器自动加上前缀(在适当的时候)，比如("user-select", "none"); 在Chrome/Safari浏览器中我们将设置为"-webkit-user-select", Firefox会使用"-moz-user-select", IE10将使用"-ms-user-select".

参数说明

params,[speed],[easing],[fn]Options,Number/String,String,FunctionV1.0

第一个参数: 接收一个对象, 可以在对象中修改属性
第二个参数: 指定动画时长
第三个参数: 指定动画节奏, 默认就是swing
第四个参数: 动画执行完毕之后的回调函数

demo实例

页面渲染

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}div{width: 100px;height: 100px;margin-top: 10px;background: red;}.two{background: blue;}</style><script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<button>操作属性</button>
<button>累加属性</button>
<button>关键字</button>
<div class="one"></div>
<div class="two"></div>
</body>
</html>

demo1--操作属性

$("button").eq(0).click(function () {
$(".one").animate({width: 500
}, 1000, function () {alert("自定义动画执行完毕");
});$(".two").animate({marginLeft: 500
}, 5000, "linear", function () {// alert("自定义动画执行完毕");
});
});

当运行的时候，第一个div会宽度增加500px,第二个div会向左移动500px;

$(".one").animate({width: 500
}, 1000, function () {alert("自定义动画执行完毕");
});$(".one").animate({marginLeft: 500
}, 5000, function () {// alert("自定义动画执行完毕");
});

当一个div,有两个方法时，会根据顺序进行调用。

demo2--累加属性

$("button").eq(1).click(function () {$(".one").animate({width: "+=100"}, 1000, function () {alert("自定义动画执行完毕");});
});

对第一个div实现宽度增加100px;

demo3--利用关键字修改属性

$("button").eq(2).click(function () {$(".one").animate({// width: "hide"width: "toggle"}, 1000, function () {alert("自定义动画执行完毕");});
})

调用 width: "toggle" 将第一个div进行隐藏。

Mr.J-- jQuery学习笔记(十八)--自定义动画相关推荐

Mr.J-- jQuery学习笔记(十九)--自定义动画实现图标特效
之前有写过自定义动画Mr.J-- jQuery学习笔记(十八)--自定义动画这次实现一个小demo 图标特效页面渲染 <!DOCTYPE html> <html lang=&qu ...
python3.4学习笔记(十八) pycharm 安装使用、注册码、显示行号和字体大小等常用设置...
python3.4学习笔记(十八) pycharm 安装使用.注册码.显示行号和字体大小等常用设置 Download JetBrains Python IDE :: PyCharm http://ww ...
windows内核开发学习笔记十八：IRP 处理的标准模式
windows内核开发学习笔记十八:IRP 处理的标准模式在 Windows 内核中的请求基本上是通过 I/O Request Packet 完成的. I/O manager ---> Dis ...
Polyworks脚本开发学习笔记(十八)-用SDK开发Polyworks插件
Polyworks脚本开发学习笔记(十八)-用SDK开发Polyworks插件插件是由PolyWorks加载的动态链接库(DLL文件),然后查询Polyworks模块,以确定它们具有哪些功能,提供给 ...
【D3D11游戏编程】学习笔记十八：模板缓冲区的使用、镜子的实现
(注:[D3D11游戏编程]学习笔记系列由CSDN作者BonChoix所写,转载请注明出处:http://blog.csdn.net/BonChoix,谢谢~) 模板缓冲区(Stencil Buffe ...
three.js学习笔记(十八)——调整材质
介绍到现在为止,我们都在创建新的着色器材质,但是如果我们想要修改一个Three.js内置的材质呢?或许我们对MeshStandardMaterial的处理结果感到满意,但是希望往里边添加顶点动画. ...
学习笔记(十八)：MoRe-Fi用深度学习网络从非线性信号中恢复呼吸波形
<MoRe-Fi: Motion-robust and Fine-grained Respiration Monitoring via Deep-Learning UWB Radar>学习 ...
angular学习笔记(十九)-自定义指令修改dom
使用angular指令可以自己扩展html语法,还可以做很多自定义的事情.在后面会专门讲解这一块的知识,这一篇只是起到了解入门的作用. 与控制器,过滤器,服务,一样,可以通过模块实例的directiv ...
【theano-windows】学习笔记十八——混合蒙特卡洛采样
#前言继续之前的Theano学习,本次主要学习混合蒙特卡洛(Hybrid Monte-Carlo Sampling)采样算法. 国际惯例,参考网址 Hybrid Monte-Carlo Sampli ...

Mr.J-- jQuery学习笔记(十八)--自定义动画

animate(params,[speed],[easing],[fn])

概述

参数说明

demo实例

页面渲染

demo1--操作属性

demo2--累加属性

demo3--利用关键字修改属性

Mr.J-- jQuery学习笔记(十八)--自定义动画相关推荐

最新文章

热门文章