浅谈jQuery中的动画

显示与隐藏

• show(speed,callback)

speed:动画执行的时长，单位为毫秒
callback:动画执行完毕后的回调函数

• hide(speed,callback)

speed:动画执行的时长，单位毫秒
callback:动画执行完毕后的回调函数

滑动式动画

• slideUp()和slideDown()

没有无动画版本(底层代码预定义动画执行的时长)，改变指定元素的高度,括号里面的参数同样传时长，单位毫秒

淡入淡出动画

• fadeOut()和fadeIn()

括号里的参数接收一个时长，单位为毫秒

动画切换

• fadeToggle()

括号里的参数接收一个时长，单位为毫秒

自定义动画

• animate()方法：自定义动画

1.animate(properties,duration,callback)
properties:表示css的样式属性，设置动画执行结束的样式属性值
duration:表示动画执行的时长，单位为毫秒
callback：表示动画执行完毕后的回调函数
2.animate(properties,options)
properties:表示css的样式属性，设置动画执行结束的样式属性值
options:表示设置动画的相关参数
duration：表示动画执行的时长，单位为毫秒
complete：表示动画执行完毕后的回调函数
queue：布尔值，设置是否添加到动画队列中

• 并发与排队效果

并发效果：就是指多个动画同时执行，多个CSS的样式属性值同时改变，动画多个值综合效果
排队效果：就是指多个动画按照定义的先后顺序执行，多个CSS的样式属性值先后改变
queue：用于控制当前的动画效果是并发还是排队效果

• 停止执行动画

stop()方法没有接收任何参数时：立即停止执行动画
stop(queue)方法的第一个参数
fasle：表示停止当前动画，但队列中的动画继续执行
true：表示停止当前动画，并且清空动画队列
stop(queue,gotoEnd)方法的第二个参数
false：不会做任何处理
true：表示停止当前动画，并且将指定元素设置为动画执行完毕后的样式

• 延迟执行动画，delay()

语法结构如下

$('div').animate({
    left:800
},3000).delay(1000).animate({
    top:600
},3000);