jQuery的效果动画

jQuery可以用来制作动画。参考资料为jQuery API中文文档。

分类简介：

基本动画

show
显示隐藏的匹配元素，如果元素可见，则不改变任何东西。这个方法对通过hide隐藏的或是display：none；都有效。
使用方法：show([speed,[easing],[fn]])；speed表示单位为毫秒的动画时长，可为竖直也可为slow、normal、fast。fn为动画完成时的执行函数，每个元素执行一次，easing用来指定切换效果，默认为swing，可用参数linear。若不使用参数则直接显示，无动画效果。

$(".box").show(1000,function(){
        $(this).text("显示完成");
    })

hide
隐藏显示的元素，若已隐藏则无改变。使用方法及参数同show。

$(".box").hide(4000,function(){
        alert("元素已隐藏");
    })

toggle
用于绑定两个或多个时间处理器函数，以响应被选元素的轮流的click事件。元素为可见的就切换为隐藏，反之相反。使用方法及参数同show。

$("button").click(function(){
        $(".box").toggle(1000,function(){
            alert("abc");
        });
    })

滑动

slideDown
向下增大，动态的显示所有匹配的元素，在显示完成后可选的触发一个回调函数，只调整元素的高度，使匹配的元素以滑动形式显示出来。在jQuery1.3中上下的padding和margin也有动画
使用方法：slideDown([speed],[easing],[fn])参数分别对应动画时长，动画完成时的执行函数，每个动画只执行一次。以及切换效果，默认为swing。

 $("button").click(function(){
        $(".box").slideDown(2000);
    })

slideUp
通过高度变化动态的隐藏所有匹配的元素。其他属性及使用方法同slidedown。

$("button").click(function(){
        $(".box").slideUp(2000);
    })

slideToggle
通过高度变化来切换可见性，其他属性及效果同slideup。

$("button").click(function(){
        $(".box").slideToggle(2000);
    })

淡入淡出

fadeIn
通过不透明度变化来实现所有匹配元素的淡入效果，动画完成后可选的触发一个回调函数，这个动画只调整元素的不透明度，对其高度和宽度无影响。
使用方法：fadeIn([speed],[easing],[fn])，参数解释同show。

$("button").click(function(){
        $(".box").fadeIn(1000,function(){
            $(this).text("我出来啦！");
        });
    });

fadeOut
通过不透明度变化来实现所有匹配元素的淡出效果，动画完成后可选的触发一个回调函数，这个动画只调整元素的不透明度，对其高度和宽度无影响。
使用方法：fadeIn([speed],[easing],[fn])，参数解释同show。

$("button").click(function(){
        $(".box").fadeOut(1000);
    });

fateTo
不论元素原来是显示还是隐藏，把所有匹配元素的不透明度以渐进方式调整到指定的不透明度。
使用方法：fadeTo([[speed],opacity,[easing],[fn]])，其中opacity为一个0-1之间的一个表示透明度的数字，其他参数解释见show。

$("button").click(function(){
        $(".box").fadeTo(1000,0.4,function(){
            $(this).text("我出来啦！");
        });
    });

fadeToggle
通过不透明度变化来开关所有匹配元素的淡入淡出效果。

$("button").click(function(){
        $(".box").fadeToggle(1000,function(){
            $(this).text("我出来啦！");
        });
    });

自定义动画

animate
用于创建自定义动画。所有指定属性都必须用骆驼形式，如：marginLeft等。
使用方法：animate(params,[speed],[easing],[fn])第一个参数是作为动画属性和中值样式属性和其值的集合。

//点击按钮，盒子平移
$("button").click(function(){
        $(".box").animate({left:"+50px"
        },1000);
    })
//点击按钮，盒子变化
$("button").click(function(){
        $(".box").animate({
            width:300,
            height:300,
            borderWidth:10
        },1000)
    })

delay
设置一个延迟来推迟队列中之后的项目，可推迟动画队列的执行，也可以用于自定义队列。
使用方法：delay(duration,[queueName])其中duration是延迟的时间，第二个参数默认为fx，是动画队列。

 $(".btn1").click(function(){
        $(".box1").slideUp(3000);
        $(".box").slideUp(1000).delay(1000).fadeIn(1000);
    })

stop
停止在所有元素上正在运行的动画，如果队列中有等待执行的动画，将立即被执行。
使用方法：stop([clearQueue],[jumpToEnd])clearQueue:如果为true，则清空队列。可以立即结束动画。
jumpToEnd:让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。如果要停止单个的对象的动画，则在第一个参数的位置写上要停止的动画队列名字。

代码	解释
stop（true，true）；	清空队列，立即结束所有队列里的动画，立即完成动画
stop（true，false）；	清空队列，立即结束动画，停止在动画完成的进度那里
stop（false，true）；	跳过当前动画，直接跳到其最终结果，执行下一个动画
stop（false，false）；	跳过当前动画，直接停止在这个时候的效果，执行下一个动画
stop（false）；	等价于stop(false,false):
stop（true）；	等价于stop(true,false):
stop（）；	等价于stop(false,false):

$(".btn1").click(function(){
        $(".box").animate({left:"+200px"
        },3000);
        $(".box1").fadeTo(3000,0.1)
    })
    $(".btn2").click(function(){
        $("div").stop(true);
    })

finish
停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。通俗来说就是停止动画运行，直接展示最终结果。
使用方法：finish( [queue ] )；
与stop（true，true）;很像，都是清除队列，并且让动画跳转到最终值。但是finish会导致所有排队的动画的css属性跳转到其最终值。而stop只结束队列里的动画。

设置

jQuery.fx.off
关闭页面上所有的动画。把这个属性设置为true可以立即关闭所有动画(所有效果会立即执行完毕)。当把这个属性设成false之后，可以重新开启所有动画。
一般在这些情况时使用：在配置比较低的电脑上使用jQuery，或者由于动画效果而遇到了 可访问性问题

$(".btn1").click(function(){
        $(".box1").slideUp(3000);
        $(".box").slideUp(1000).delay(1000).fadeIn(1000);
    })
    jQuery.fx.off=true;//停止动画，但是延迟和执行效果都是有的
    jQuery.fx.off=false;//重启动画