简介

jQuery 提供了几种简单常用的固定动画方面我们使用。但有些时候，这些简单动画无法满足我们更加复杂的需求。这个时候，jQuery 提供了一个 .animate() 方法来创建我们的自定义动画，满足更多复杂多变的要求。

animate() 使用

$(selector).animate({params
}, speed, callback);

参数说明：

params：必须参数,定义形成动画的 CSS 属性。
speed：可选参数,规定效果的时长,可取值 “slow”、“fast” 或毫秒。
callback：参数是动画完成后所执行的函数名称。

操作多个属性

$("button").click(function(){$("div").animate({left:'250px',opacity:'0.5',height:'150px',width:'150px'// backgroundcolor:'red' // 这是错误的，自定义动画不允许设置背景颜色，jQuery底层是DOC实现，如果是Zepto就可以实现（底层是CSS3）。});});

注：一个 CSS 变化就是一个动画效果，上面的例子中，已经有四个 CSS 变化，已经实现了多重动画同步运动的效果。（jQuery中自定义动画不允许设置背景颜色）

使用相对值

使用相对值，可以在上一个值的基础上进行累加。

$("button").click(function(){$("div").animate({left:'250px',height:'+=150px',width:'+=150px'// width:'*=50px' // 这是错误的，只能加减不能乘除});
});

使用预定义的值

可以把属性的动画值设置为 “show”、“hide” 或 "toggle” 这些预定义值。

$("button").click(function(){$("div").animate({height:'toggle'});
});

通过连缀或者顺序来实现列队动画

顺序写法

$("button").click(function(){var div=$("div");div.animate({height:'300px',opacity:‘0.4’}, "slow");  div.animate({width:'300px',opacity:‘0.8’}, "slow"); div.animate({height:'100px',opacity:'0.4'}, "slow");div.animate({width:'100px',opacity:'0.8'}, "slow");
});

连缀写法

$("button").click(function(){var div=$("div");div.animate({height:'300px',opacity:'0.4'},"slow").animate({width:'300px',opacity:'0.8'},"slow").animate({height:'100px',opacity:'0.4'},"slow").animate({width:'100px',opacity:'0.8'},"slow");
});

停止动画

stop(clearQueue, gotoEnd)

参数说明：

clearQueue：是否清空动画队列，默认为 false
gotoEnd：是否显示到当前动画最后位置，默认为 false

stop(false)：停止当前动画，后续队列中的动画继续执行。
stop(true) ：停止当前动画，并清空后续队列中的所有动画。
stop(false,true)：当前动画立即执行完毕，后续队列中的动画继续执行。
stop(true,true)：当前动画立即执行完毕，并清空后续队列中的所有动画。

延时动画

有时在执行动画或队列动画时，需要在运动之前有延迟执行，jQuery 为此提供了 .delay() 方法。这个方法可以在动画之前设置延迟，也可以在列队动画中间加上。

$('div').animate({height:300}).delay(1000).animate({width:300});

【jQuery笔记Part2】05-jQuery自定义动画相关推荐

【jQuery笔记Part2】01-jQuery显示隐藏切换动画侧边广告案例
jQuery动画 jQuery动画动画分类 HTML DOM position 属性显示 show(毫秒, 完成回调函数) 隐藏 hide(毫秒, 完成回调函数) 切换 toggle(毫秒, 完成 ...
【jQuery笔记Part2】04-jQuery淡入淡出动画右下角广告案例
jQuery淡入淡出动画-右下角广告 CSS display 属性淡入淡出动画案例 jQuery笔记目录 CSS display 属性 display 属性规定元素应该生成的框的类型. 值描述 n ...
【jQuery笔记Part2】02-jQuery展开收起动画帷幔效果案例下拉菜单案例显示隐藏更多案例折叠菜单案例
展开&收起动画&案例 HTML DOM overflow 属性展开 slideDown(毫秒, 完成回调函数) 收起 slideUp(毫秒, 完成回调函数) 切换 slideTogg ...
【jQuery笔记Part2】03-jQuery-addBack()与end()的区别-children()与find()的区别
前几章的方法对比与总结示例页面:3层div css():指定元素修改属性 parrent():返回父节点(被包装成jQuery对象) addBack():额外添加调用链上一级 end():选择调用链 ...
【jQuery小实例】---2自定义动画
---本系列文章所用使用js均可在本博客文件中找到本节用jQuery完一个简易的动画效果,一个小驴跑跑的效果.和一个类似qq面板效果.大致也分为三步:添加jquery-1.8.3.js文件.这个是不 ...
jQuery笔记——工具函数——jQuery标志
jQuery定义了很多工具函数,这些函数的命名空间为$,但不操作包装集,用户可以把它看作是顶层函数,不同之处是他们定义在$实例上,而不是定义在window实例上,类似于静态类型函数. 通常来说,工具函 ...
jQuery之animate自定义动画
下面是对jQuery自定义动画的整理,希望可以帮助到有需要的小伙伴. jQuery的animate()方法可以用来自定义动画方法语法结构如下: animate(properties,duration ...
html 放上去动画停止,使用jQuery的animate()+CSS样式实现动画效果及stop()停止动画
01第1节:jQuery动画概述 #JavaScript#在jQuery中,除了可以淡入淡出.滑动效果之外,还可以使用animate()方法创建自定义的动画效果. 对于自定义的动画函数animate( ...
jQuery笔记综合
jQuery笔记一. jQuery入门目标: 能够说出什么是jQuery 能够说出jquery的优点能够简单使用jquery 能够说出dom对象和jquery对象的区别 1.jQuery概述仓 ...

【jQuery笔记Part2】05-jQuery自定义动画

jQuery自定义动画

简介