jquery animate()方法 动画详解
【摘要】 query animate 动画详解（超简单易懂）animate（）方法是jquery里的动画效果，通过修改css相关属性，在规定时间内，值是不断变化的从而形成了一种动画的效果。(selector).animate({styles},speed,easing,callback)styles 必需。规定产生动画效果的一个或多个 CSS 属性/值。逗号分隔speed 可选。规定动画的速...
query animate 动画详解（超简单易懂）
animate（）方法是jquery里的动画效果，通过修改css相关属性，在规定时间内，值是不断变化的从而形成了一种动画的效果。
(selector).animate({styles},speed,easing,callback)
styles 必需。规定产生动画效果的一个或多个 CSS 属性/值。逗号分隔
speed 可选。规定动画的速度。可能的值 毫秒 "slow" "fast"
easing 可选。规定在动画的不同点中元素的速度。默认值是 "swing"。可能的值：
- "swing" - 在开头/结尾移动慢，在中间移动快
- "linear" - 匀速移动
提示：扩展插件中提供更多可用的 easing 函数。
callback 可选。animate 函数执行完之后，要执行的函数。
$(document).ready(function(){
$("#btn1").click(function(){
$("#box").animate({height:"300px"});
});
});
单击按钮盒子变高到300px（达到300px不是在原基础上加300px），speed没写，默认是normal，easing默认swing，可以安装插件在插件中选择更多的移速效果，callback执行函数。
注：css属性名必须要采用驼峰命名法，其次个别属性进行操作的时候，要符合要求，比如left top设置时要给相关元素进行定位，在进行颜色设置时，要加入颜色插件才能修改颜色。
多属性
$(document).ready(function(){
$("#btn1").click(function(){
$("#box").animate({height:"300px",width:"300px"});//多属性写在一起 同时触发
});动画队列
$(document).ready(function(){
$("#btn1").click(function(){
$("#box").animate({height:"300px",width:"300px"}); //动画队列 会按顺寻执行
$("#box").animate({height:"100px",width:"100px"});
});
});属性相对值
$(document).ready(function(){
$("#btn1").click(function(){
$("#box").animate({height:"+=100px",width:"+=300px"});//相对值书写 在原有基础上增加100px
});
});
回调函数
$(document).ready(function(){
$("#btn1").click(function(){
$("#box").animate({height:"+=100px",width:"+=300px"},2000,function(){ //回调函数
$("#box").animate({height:"+=100px",width:"+=300px"},2000)});
});
});stop（）停止动画队列 。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）