jq动画效果

基本效果

show：显示隐藏的匹配元素，
hide:隐藏现实的匹配元素，
toggle:切换显示与隐藏
show和hide都有三个参数：
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
举例：
css部分：

.block { 
width: 100px; 
height: 100px;
 background:

red; }

HTML部分

<button id="btn">按钮</button> 
<div class="block"> 国庆快乐！ </div> 

JS部分：

$("#btn").on("click",function(){
$(".block").toggle(1000,function(){
 console.log(动画完成); 
 }) }

2:滑动效果

slideDown([s],[e],[fn]) 向下滑动
slideUp([s,[e],[fn]]) 向上滑动
slideToggle([s],[e],[fn]) 自动切换
参数：
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn在动画完成时执行的函数，每个元素执行一次。

案例：
HTML和css部分与上面的例子相同
JS部分：

$("#btn").on("click",function(){ 
$(".block").slideToggle(function (){ 
console.log("动画完成"); }); }) 

3：淡入淡出

fadeIn([s],[e],[fn]) 淡入
fadeOut([s],[e],[fn]) 淡出
fadeTo([[s],o,[e],[fn]]) 将指定元素的不透明度调整到指定的透明度上面
fadeToggle([s,[e],[fn]]) 淡入淡出来回切换

参数：
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
opacity:一个0至1之间表示透明度的数字。(只有fadeTo有)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。

$("#btn").on("click",function(){
 $(".block").fadeTo(1000,0.5,function (){ 
 console.log("动画完成"); }); })

4：自定义动画

animate(p,[s],[e],[fn])
stop([c],[j])
delay(d,[q])
finish([queue])

1:animate()

params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 “swing”.
fn:在动画完成时执行的函数，每个元素执行一次。

2.stop([c],[j])

停止所有在指定元素上进行的动画
第一个参数：是否立即清除队列
第二个参数：是否立即完成当前动画

3.finish()

停止当前正在执行的动画，当.finish()在一个元素上被调用，立即停止当前正在运行的动画和所有排队的动画（如果有的话），并且他们的CSS属性设置为它们的目标值（所有动画的目标值）。所有排队的动画将被删除。
如果第一个参数提供，该字符串表示的队列中的动画将被停止。
.finish()方法和.stop(true, true)很相似，.stop(true, true)将清除队列，并且目前的动画跳转到其最终值。但是，不同的是，.finish() 会导致所有排队的动画的CSS属性跳转到他们的最终值。

4.delay

设置一个延时来推迟执行队列中之后的项目。
duration,[queueName]Integer,StringV1.4duration:延时时间，单位：毫秒
queueName:队列名词，默认是Fx，动画队列。