jQuery里面的动画

参数说明

参数	说明
speed	三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing	(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn	在动画完成时执行的函数，每个元素执行一次。
easing	用来指定切换效果，默认是"swing"，可用参数"linear"
fn	在动画完成时执行的函数，每个元素执行一次
out	当鼠标移到元素上或移出元素时触发执行的事件函数
over	鼠标移到元素上要触发的函数
type	要触发的事件类型
events	一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。

• jQuery动画暂不支持css3属性

<button id="btn">切换</button>
<button id="stop">停止</button>
<button id="get">获取</button>
<div class="box" style=" width: 100px;height: 200px;background-color: red;"></div>

一、基本动画

方法	概述
show([s,[e],[fn]])	显示隐藏的匹配元素。
hide([s,[e],[fn]])	隐藏显示的元素
toggle([s],[e],[fn])	如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

    $("#btn").click(function () {
        $(".box").hide(1000,"swing",function(){
            console.log("动画完成");
        });
        $(".box").show(1000,"swing",function(){
            console.log("动画完成");
        });
        $(".box").toggle(1000,function(){
            console.log("动画完成");
        });
    }) 

二、滑动动画

方法	概述
slideDown([s],[e],[fn])	通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数
slideUp([s,[e],[fn]])	通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数
slideToggle([s],[e],[fn])	通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数

    $("#btn").click(function () {
        $(".box").slideUp(1000,function(){
            console.log("动画完成");
        });
        $(".box").slideDown(1000,function(){
            console.log("动画完成");
        });
        $(".box").slideToggle(1000,function(){
            console.log("动画完成");
        });
    }) 

三、淡入淡出动画

方法	概述
fadeIn([s],[e],[fn])	通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数
fadeOut([s],[e],[fn])	通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数
fadeTo([[s],o,[e],[fn]])	把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数
fadeToggle([s,[e],[fn]])	通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数

    $("#btn").click(function () {
        $(".box").fadeIn(1000,function(){
            console.log("动画完成");
        });
        $(".box").fadeOut(1000,function(){
            console.log("动画完成");
        });
        $(".box").fadeToggle(1000,function(){
            console.log("动画完成");
        });
        $(".box").fadeTo(1000,0.5,function(){
            console.log("动画完成");
        });
    }) 

四、自定义动画

方法	概述
animate(p,[s],[e],[fn])	用于创建自定义动画的函数
stop([c],[j])	停止所有在指定元素上正在运行的动画
delay(d,[q])	设置一个延时来推迟执行队列中之后的项目
finish([queue])	停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画

• stop 停止当前正在运行的动画
• 参数
• 参数1.是否立即清除动画的队列
• 参数2.是否停止当前动画 立即完成

    $("#btn").delay(1000).click(function () {
        $(".box").animate({
            marginLeft:200,
            marginTop:100
        },200,function(){
            console.log("动画完成");
        }).animate({
            opacity:0.5
        },1000,function(){});
    }); 

    //stop--停止当前正在执行的动画
    $("#stop").click(function(){
        $(".box").stop(true,false);//默认false、false
    }); 

• finish 等价 stop(true,true)，当前动画停止 ，不清除队列 ，直接队列完成

五、获取动画队列

    //获取动画队列
    $('#get').click(function (){
        //可以知道当前元素有几个动画队列
        console.log($('.box').queue());//(11) ["inprogress", ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ]  
    });