九、jQuery动画 - 《jQuery 学习笔记》

[TOC]

一、三组基本动画

显示(show)与隐藏(hide)是一组动画：
滑入(slideUp)与滑出(slideDown)与切换(slideToggle)，效果与卷帘门类似
淡入(fadeIn)与淡出(fadeOut)与切换(fadeToggle)
stop() 停止正在进行的动画 ```javascript $obj.show([speed], [callback]); // speed(可选)：动画的执行时间 // 如果不传，就没有动画效果。如果是slide和fade系列，会默认为normal // 毫秒值(比如1000),动画在1000毫秒执行完成(推荐) // 固定字符串，slow(600)、normal(400)、fast(200)，如果传其他字符串，则默认为normal。 // callback(可选):执行完动画后执行的回调函数

slideDown()/slideUp()/slideToggle();同理 fadeIn()/fadeOut();fadeToggle();同理


```javascript
$(document).ready(function(){
    $("#b1").click(function(){
        $("#b1Div").toggle("1000");
    });
    $("#b2").click(function(){
        $("#b2Div").slideToggle("slow");
    });
    $("#b3").click(function(){
        $("#b3Div").fadeToggle("slow");
    });
});

示例：

逐个隐藏

<input type="button" value="隐藏动画" id="btn1"/>
<input type="button" value="显示动画" id="btn2"/>
<div>
    <img src="images/11.jpg"/>
    <img src="images/12.jpg"/>
    <img src="images/13.jpg"/>
    <img src="images/14.jpg"/>
</div>

<style>
     div{
        width: 400px;
     }
    img{
        width:90px ;
        height:90px;
        vertical-align: top;
    }
</style>

<script>
//一起隐藏
$(function () {
    $("#btn1").click(function () {
        //回调函数
        $("div>img").hide(1000,function () {
            alert("结束了");
        });
    });

    $("#btn2").click(function () {
        //回调函数
        $("div>img").show(1000,function () {
            alert("结束了====");
        });
    });
});
</script>

<script>
//逐个隐藏
$(function () {
    $("#btn1").click(function () {
        //获取div,最后一个图片,隐藏
        $("div>img").last("img").hide(800,function () {
            //arguments.callee相当于当前的函数
            $(this).prev().hide(800,arguments.callee);
        });
    });
    //显示
    $("#btn2").click(function () {
        $("div>img").first("img").show(800,function () {
            //arguments.callee相当于当前的函数
            $(this).next().show(800,arguments.callee);
        });
    });
});
</script>

二、自定义动画

animate 自定义动画

$(selector).animate({params},[speed],[easing],[callback]);
// {params}：要执行动画的CSS属性，带数字（必选）
// speed：执行动画时长（可选）
// easing:执行效果，默认为swing（缓动）  可以是linear（匀速）
// callback：动画执行完后立即执行的回调函数（可选）

示例：
盒子放大缩小 ```javascript


<a name="ueUma"></a>
## 三、动画队列与停止动画
在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行（联想：火车进站）。

```javascript
// stop方法：停止当前正在进行的动画
stop(clearQueue, jumpToEnd);
// 第一个参数：可选。代表是否要清空未执行完的动画队列。
// 第二个参数：可选。代表是否直接将正在执行的动画跳转到当前动画的末尾。
// 如果不写参数，默认两个都是false

##1.stop基本使用以及stop第二个参数的含义
//stop() 是停止当前正在进行的动画
//stop有两个参数
//1.是否清空动画队列
//2.是否让要停止的那个动画跳转到动画结束的位置
//3.如果上面两个参数都没有写，那么默认都是false
var $box = $("#box");
$box.animate({"width":100,"height":100},3000);
$box.stop(false,true).animate({"width":500,"height":500},3000);

##2.动画队列
var $box = $("#box");
$box.animate({"width":100,"height":100},3000);
$box.animate({"width":500,"height":500},3000);
//下面代码stop的意思：让2行的动画立刻停止，同时让当前box来到动画结束的状态(宽高都是100)
//当2行动画停止并且来到动画结束的状态之后，因为现在的动画队列里面有3行和4行两个动画，所以会先执行3行的动画
$box.stop(false,true).animate({"width":400,"height":400},3000);

##3.清除动画队列
var $box = $("#box");
$box.animate({"width":100,"height":100},3000);
$box.animate({"width":500,"height":500},3000);
//下面代码stop的意思：让第2行的动画立刻停止，同时让当前box来到动画结束的状态(宽高都是100)。再然后清空当前
//动画队列里面的所有动画（当前动画队列里面只有3行的动画，所以会将3行的动画清理掉）
// 当上面的操作完成之后，再开启下面的动画
$box.stop(true,true).animate({"width":400,"height":400},3000);