jQuery动画方法
2018-06-16 本文已影响0人
夜舞暗澜_3ea2
jQuery给我们提供了非常简单的动画设计方案。只要指定的属性是个连续值，我们就可以通过简单的指定初始状态、最终状态、时间、速度函数来实现一些动画效果。
创建自定义的动画：
1. 语法：$el.animate(params, [speed], [easing], [fn])
params：
一组包含作为动画属性和终值的样式属性和及其值的集合对象。
- 对象中的每个key取值都必须是可变化的、连续的值；
- 所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left。
查看animate支持的属性
颜色动画的支持需要插件。
speed：
- 三种预定速度之一的字符串("slow","normal", or "fast")
- 表示动画时长的毫秒数值(如：1000)
easing：
动画效果速度函数的名称(需要插件支持)。默认jQuery提供"linear" 和 "swing"。
fn：
在动画完成时的回调函数，每个元素执行一次。
2. 举个例子：
$(ev.target).animate({
width: 120,
height: 120,
left: 100,
backgroundColor: 'silver'
}, 1000, 'swing')
这些动画会同时进行。
在这个例子中，我使用了jquery-color-animate-plugin处理颜色渐变的问题。
3.动画队列：
其实jQuery中有一个隐藏的对象：队列。这个对象主要服务的对象就是animate。
队列
队列控制
当需要多个animate依次执行时，会自动将多个动画放入队列，顺序执行。
jQuery animate中的队列操作：
1). stop([clearQueue],[gotoEnd])
看这个例子：jQuery Animate Queue队列
- 当clearQueue取值true时，动画队列被完全清空；
- 当gotoEnd取值true时，当前动画虽然被取消，但是元素会直接显示为动画最终结束时的样子。
2). delay(duration)
没什么说的，这是延时。target.delay(5000)可以让前后两个动画间隔5s。
有趣的是：delay()可以被stop中止。在延时中调用stop()可以直接开始下一个动画。在上面的例子中将注释掉的delay放出来试试看～
3). finish()
.finish()方法和.stop(true, true)很相似，.stop(true, true)将清除队列，并且目前的动画跳转到其最终值。但是，不同的是，.finish() 会导致所有排队的动画的CSS属性跳转到他们的最终值。
3. 如果不支持动画。。。
大杀器：jQuery.fx.off = true;
这个属性允许所有jQuery动画被触发时不进行动画，直接跳到动画完成状态。用以保证即使动画无法正常执行，也不影响页面的可访问性。
