一、自定义动画
有些复杂的动画通过之前学到的几个动画函数是不能够实现的，需要引进自定义动画的animate()方法，该方法执行CSS属性集的自定义动画，通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
自定义动画的语法格式如下所示：
animate(params, speed, callback)
其中，params是一个包含样式属性及值的映射，例如{键1：值1[键2：值2]}；speed和callback参数与前面几个动画函数定义中的参数含义相同，speed是速度定义参数，callback是回调函数。
1.简单动画
例1在页面中显示一个红色div块，单击该div块后其在页面上横向移动。需要说明的是，为了使元素动起来，可以改变left属性使元素在水平方向移动；改变top属性可以使元素在垂直方向移动。为了能使元素的top、right、bottom、Ieft属性值起作用，还必须声明元素的position属性。
【例1】
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>animate方法自定义动画</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
//DIV块的单击事件处理函数
$("#box").click(function(){
//执行动画，向左移动100像素，使用时间为1秒
$(this).animate({left:"100px"}, 1000);//1秒内将left属性改变成100像素})
})
});
</script>
<style>
#box{
position:relative;/*设置为相对定位，如果这句没有，元素不能移动*/
width:200px;/*DIV块的宽度为200像素*/
height:200px;/*DIV块的高度为200像素*/
background :red;/*DIV块的背景颜色为红色*/
cursor:pointer;/*设定鼠标指针样式*/
}
</style></head>
<body>
<div>
<div id="box"></div>
</div>
</body>
</html>
2.累加或累减动画
例1中当DIV移动到距离左边100px的位置之后，再次单击DIV块，DIV块将不会移动。虽然再次单击DIV块仍然会触发执行DIV单击事件匿名函数，但因为DIV已经在距离左边100px的位置，所以位置不会再发生变化。如果再次单击DIV块时想让DIV块往右移动100px，即left值变为200px，第三次单击DIV块时，DIV再往右移动100px，即left属性值变为300px，以此类推下去，即每次DIV的left属性值都在前次动画结束时left属性值的基础上增加100px，可通过如下jQuery代码实现：
$("#box").click(function(){
$(this).animate({left:"+=100px"}, 1000)
})
同理，如果要实现累减动画，只需要把“＋＝”变成“－＝”。
3.多重动画
例1通过控制left属性值改变DIV块的位置，这是很单一的动画。如果需要同时执行多个动画，例如在DIV块向右滑动的同时放大其高度，改变其透明度，根据animate()方法的语法结构，可以通过如下jQuery代码实现：
$("#box").click(function(){
$(this).animate({left:'+=100px',
height:'400px',
opacity:'0.5'
}, 1000)
})
4.动画队列
上例中的三个动画效果是同时发生的，如果想顺序执行这三个动画，例如先向左滑动100px，然后把高度放大到400px，最后把透明度改为0.5，实现以上内容可以采用链式写法，可以通过如下jQuery代码实现：
$("#box").click(function(){
$(this).animate({left:"+=25px"}, 500)
.animate({height:"+=20px"}, 500)
.animate({opacity:"-=θ.1"}, 500)
})
5.动画回调函数
在上例中，如果想在最后一步切换CSS样式( background ：blue)，而不是淡出，按照前面的链式处理，其jQuery代码实现如下：
$("#box").click(function(){
$(this).animate({left:"+=25px"}, 500)
.animate({height:"+=20px"}, 500)
.animate({opacity:"-=0.1"}, 500)
.css('background','blue')
})
其中，css()方法并不会在动画队列中排队，也就是说不是等DIV块向右移动、高度变大、透明度改变完成之后才改变背景色。出现这个问题的原因是css()方法并不是动画方法，不会被加入动画队列中排队，而是插队立即执行。如果要实现预期的效果，必须使用回调函数让非动画方法实现排队。其jQuery实现代码如下：
$("#box").click(function(){
$(this).animate({left:"+=25px"}, 500)
.animate({height:"+=20px"}, 500)
.animate({opacity:"-=0.1"}, 500,function(){
$(this).css('background','blue')
})
二、停止动画
1.停止元素的动画
网页中有时需要停止匹配元素正在进行的动画，这时要使用停止元素的动画方法stop()，其语法格式如下所示：
stop([ clearQueue ],[gotoEnd])
其中， clearQueue 和gotoEnd都是可选参数，为布尔值，即true或false，默认值都是false， clearQueue 代表是否要清空未执行完的动画队列，gotoEnd代表是否直接将正在执行的动画跳转到末状态，注意不是动画队列中最后一个动画的末状态。由于 clearQueue 和gotoEnd都为可选参数，stop()方法有以下几种应用方法。
(1)两个参数都为false的情况，即stop(false，false)，由于false是默认值，因此也可简写为stop()，表示不将正在执行的动画跳转到末状态，不清空动画队列。也就是说，停止当前动画，并从目前的动画状态开始动画队列中的下一个动画。
(2)第一个参数为true的情况，即stop(true，false)，由于false是默认值，因此也可简写为stop(true)，表示不将正在执行的动画跳转到末状态，但清空动画队列。也就是说，停止所有动画，保持当前状态，瞬间停止。
(3)第二个参数为true的情况，即stop(false，true)，表示不清空动画队列，将正在执行的动画跳转到末状态，也就是说，停止当前动画，跳转到当前动画的末状态，然后进入队列中的下一个动画。
(4)两个参数都为true的情况，即stop(true，true)，表示既清空动画队列，又将正在执行的动画跳转到末状态。也就是说，停止所有动画，跳转到当前动画的末状态。
例2是对stop(方法的四种情况的实例演示，应重点理解这四种情况的使用环境。
【例2】
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>animate方法自定义动画</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$("button:eq(0)").click(function(){
$("#panel").animate( {height:"150"}, 1000)
.animate( {width:"300"}, 1000).hide(2000)
.animate( {height:"show", width:"show", opacity:"show"}, 1000)
.animate( {height:"500"}, 1000);
});
$("button:eq(1)").click(function(){
$("#panel").stop();//停止当前动画，继续下一个动画
});
$("button:eq(2)").click(function(){
$("#panel").stop(true);//清除元素的所有动画
});
$("button:eq(3)").click(function(){
$("#panel").stop(false,true);//让当前动画直接到达末状态，继续下一个动画
});
$("button:eq(4)").click(function(){
$("#panel").stop(true,true);//清除元素的所有动画，让当前动画到达未状态
});
});
</script>
</head>
<body>
<button>开始一连串动画</button>
<button>stop()</button>
<button>stop(true)</button>
<button>stop(false, true)</button>
<button>stop(true, true)</button>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jquery。
</div>
</div>
</body>
</html>
例2的说明如下：
(1)单击按钮(stop())，由于两个参数都是false，所以单击发生时，animate没有跳到当前动画(动画1)的最终效果，而直接进入动画2，然后动画3、4、5，直至完成整个动画。
(2)单击按钮(stop(true))，由于第一个参数是true，第二个参数是false，所以animate立刻全部停止了。
(3)单击按钮(stop(false，true))，由于第一个参数是false，第二个参数是true，所以单击发生时，animate身处的当前动画(动画1)停止，并且animate直接跳到当前动画(动画1)的最终末尾效果的位置，接着正常执行下面的动画(动画2、3、4、5)，直至完成整个动画。
(4)单击按钮(stop(true，true))，由于两个参数都是true，所以单击发生时，animate跳到当前动画(动画1)的最终末尾效果的位置，然后全部动画停止。
jQuery中的stop()方法有许多非常有效的用法。例如一个下拉菜单，当鼠标移上去的时候显示菜单，当鼠标离开的时候隐藏菜单，如果快速不断地将鼠标移入移出菜单（即菜单下拉动画未完成时，鼠标又移出了菜单）就会产生“动画积累”，当鼠标停止移动后，积累的动画还会持续执行，直到动画序列执行完毕。遇到这种情况时，在写动画效果的代码前加入stop(true，true)，这样每次快速地移入移出菜单就正常了，当移入一个菜单的时候，停止所有加入队列的动画，完成当前的动画（跳至当前动画的最终效果位置）。
2.判断元素是否处于动画状态
在使用animate()方法的时候，要避免动画积累而导致的动画与用户行为不一致，用户快速地在某个元素上执行animate动画时就会出现动画积累，即前一个动画还没结束，后一个动画已开始。解决办法是判断元素是否正处于动画状态，如果元素不处于动画状态，才为元素添加新的动画，否则不添加。其jQuery实现代码如下：
if(!$(element).is(":animated")){ //判断元素是否处于动画状态
//如果当前没有进行动画，则添加新动画
}
3.延迟动画
jQuery中delay()方法的功能是设置一个延时值来推迟动画效果的执行，调用格式为：
$(selector).delay(duration)
其中，duration参数为延时值，单位是毫秒，当超过延时值时，动画继续执行。delay与 setTimeout 函数是有区别的，delay更适合可以将队列中等待执行的下一个动画延迟指定的时间后才执行，常用在队列中的两个jQuery效果函数之间，从而在上一个动画效果执行后延迟下一个动画效果的执行时间。
例如，可以在<divid="box">的slideUp()和fadeIn()动画之间添加800毫秒的延时，jQuery实现的代码格式如下：
s('#box’).slideUp(300).delay(800).fadeIn(400)
这条语句执行后，元素会有300毫秒的卷起动画，接着暂停800毫秒，再实现400毫秒的淡入动画。
注：本文通过 CDN（内容分发网络）引用jQuery，用户可以不下载存放 jQuery。
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
🎉 往期回顾
一、jQuery概述
二、jQuery选择器（一）
三、jQuery选择器（二）
四、jQuery中的DOM操作
五、jQuery事件处理
六、jQuery动画特效（一）
1237
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
