jQuey动画-再研究

jQuery动画通常使用动画时长作为可选的第一个函数，如果省略时长，会得到
默认值400ms;
“fast”-200ms, “slow” -600ms,
可以在jQuery.fx.speeds对象中查看，修改，添加自己定义时长的名称

console.log(jQuery.fx.speeds);
//打印结果 ： {slow:600, fast:200,_default:400}

简单动画

1. fadeIn() , fadeOut() , fadeTo() （opactity,display,…）
2. show() , hide() , toggle() (opacity,width,height,display,…)
3. slideDown() , slideUp(), slideToggle() (height,display,…)
4. 经在浏览器控制台test,动画函数改变元素的属性,与元素已存在的属性有关.
   通常连续改变opactity ,width,height , 最后或开始改变display属性值,实现动画
   通常参数是 time , callback(), 或一个对象
   { duration:time, complete:Function };
   $(‘div’).fadeIn().delay(1000).queue(function(next){}).hide().show(400)
   div元素会消失,
   这说明了hide()动化没有进队列，而是立即执行了,show(400)的动化进队列了并且没有被执行;
   hide(),show(),没有参数时,它就不是动画,而是改变display属性值的普普通通函数.

自定义动画

animate()
参数通常是两个对象
动画属性对象:指定要变化的CSS属性和它们的目标值
动画选项对象: 指定动画如何执行
duration:动画持续事间
complete: 动画完成时的回调函数
queue:指定动画是否队列化------
easing:缓动函数(?)

//分析这段代码
$("div").fadeTo(0.5,500)
.animate({"width":"+=100",{queue:false,duration:5000}})
.fadeOut(2000);
//animate()的调用在5s内连续改变width属性的动画是非队列化得,所以这段动画会立即执行
并且与fadeIn()动画开始的事间相同,fadeOut()效果会在fadeTo()效果完成时立刻开始,
不会等到width动画完成

动画的取消，延迟和队列

stop(stopAll,goToEnd),
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
delay(time,queueName):添加一个时间延迟到动画队列中,
//$(“img”).fadeTo(100,0.5).delay(200).slideUp();
//快速淡出为半透明,等一等，难后向上滑动
queue():???
jQuery队列是按顺序执行的函数列表.每一个队列都与一个文档元素
关联,每一个元素的队列都与其他元素的队列彼此独立.当某个函数到达队列头部时，它会自动从队列中去除并被调用,被调用时,this指向与队列相关联的元素.