jQuery动画具有CSS3动画所不具备的以下几个特点：
（1）“控制”动画的执行；
（2）实现更复杂的动画；
（3）在动画执行之后返回一个回调函数；
在实际开发过程中，对于动画效果，我们优先使用CSS3来实现，其次再考虑jQuery。如果一个动画效果实在没办法使用CSS3来实现，或者说这个动画效果需要传递一些参数，或者使用回调函数进行其他操作，这时我们再使用jQuery。
（一）显示和隐藏
（1）show()和hide()；
（2）toggle()；//toggle()函数在jQuery函数汇总~元素角度介绍过
（3）slideToggle();滑动效果
/*******************************************/
（1）show()和hide()
{
1>简单的show()和hide()-->对于元素（标签）显示与否的操作
$().hide()
$().show()
//注意：
hide()方法就是把所选元素的display属性设置为none。
show()方法就是把所选元素的display属性还原为隐藏之前的显示状态（block、inline或者inline-block等）。
//心得：原来我让元素动态显示，一种都用的display:none和display:block,并且一直以为，只有display:block才会让其显示，现在才意识到，display有多个属性值：none block inline inline-block，这些属性值是可以相互切换的
//例：
$("img").hide();
2>较复杂的show()和hide()-->对于动画效果而言
通过在show()和hide()方法中加入相应的参数来实现带有“动画效果”的显示和隐藏。
$().hide(speed,callback)
$(),show(speed,callback)
//参数speed为必选参数（在函数中是一个数字），表示动画执行的速度，单位是毫秒；
//参数callback为可选参数（可以省略），表示动画执行完成之后的“回调函数”
//所谓的回调函数，说白了就是在动画执行完成立刻执行的一个函数
//例：
$("img").hide(500);
//区分：使用动画效果的hide(num)会有显示或隐藏的动画效果（图片逐渐的向一个角落缩小，直至消失），使变换过程显得更加平滑，而不是hide()方法那么直接消失那么生硬
}
（2）toggle()
{
toggle()方法来“切换”元素的“显示状态”。也就是说，如果元素是显示状态，则变成隐藏状态；如果元素是隐藏状态，则变成显示状态。
//即toggle()方法涵盖了hide(),show()两个方法
1>简单的toggle()
$().toggle()
//后面不带参数
//无动画效果，过程生硬，只是show()，hide()的结合体而已
2>较复杂的toggle()
$().toggle(speed , callback);
//参数speed表示动画执行的速度（在函数中是一个数字），单位是毫秒；
//参数callback为可选参数（可以省略），表示动画执行完成之后的“回调函数”。
//有动画效果，相当于有动画效果的show()和hide()的结合体
}
（3）$(selector).slideToggle(speed,callback)
{
//此函数中speed是可选参数，因为写不写speed并不会影响函数的动画效果
//slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。
speed:可选。规定元素从隐藏到可见的速度（或者相反）。默认为 "normal"。
可能的值：
毫秒 （比如 1500）
"slow"
"normal"
"fast"
//在设置速度的情况下，元素在切换的过程中，会逐渐地改变其高度（这样会创造滑动效果）。
callback:可选。toggle 函数执行完之后，要执行的函数。除非设置了 speed 参数，否则不能设置该参数。
}
（二）淡入和淡出
实现元素的淡入淡出这种渐变效果，有3组方法：
（1）fadeIn()和fadeOut()；
（2）fadeToggle()；
（3）fadeTo()；
淡入和淡出效果，本质上其实都是通过改变元素的“透明度”（opacity属性）来实现的。
（1）fadeIn()和fadeOut()
{
$().fadeIn(speed , callback)//实现元素的淡入效果
$().fadeOut(speed , callback)//实现元素的淡出效果
//speed为可选参数，表示动画执行的速度，单位为毫秒，默认为200毫秒。如果speed参数省略，则采用默认速度。
//callback为可选参数，表示动画执行完成之后的回调函数。
//在speed参数未写的时候，函数是有动画效果的，只不过时间较短而已
//对于回调函数，是动画执行完毕之后所执行的函数
例：
$("img").fadeOut(function(){
console.log("此为回调函数")
});
//当不设置speed的时候，就完全可以不写
}
（2）fadeToggle()
{
//fadeToggle()与toggl()的区分：
fadeToggle()方法跟toggle()方法很相似，不过toggle()方法通过改变height、width、opacity来实现动画的显示与隐藏，而fadeToggle()只通过opacity来实现动画的显示与隐藏。
//fadeToggle()相当于fadeIn()和fadeOut()的结合体
$("#img2").fadeToggle();
}
（3）fadeTo()
{
对于淡入和淡出的本质分析，其实就是透明度的转换
fadeIn():透明度由0到1的转变
fadeOut():透明度由1到0的转变
//
$().fadeTo(speed , opacity , callback)
speed为可选参数，表示动画执行的速度（此函数中为一个数字），单位为毫秒，默认为500毫秒。如果speed参数省略，则采用默认速度。
//实际操作中speed成为了必选项，如果要不写speed的话，就区分不开speed与opacity了,其中speed还可以使用字符串代替："slow"、"normal"、"fast"
opacity为必选参数，表示元素指定的透明度，取值范围为0.0~1.0。
callback为可选参数，表示动画执行完成之后的回调函数。
}
（三）滑动效果
实现滑动效果，有2组方法：
（1）slideUp()和slideDown()；
（2）slideToggle()；
/*******************************************/
（1）slideUp()和slideDown()
{
$().slideDown(speed , callback)//实现元素的下滑效果
$().slideUp(speed , callback)//实现元素的上滑效果
speed为可选参数，表示动画执行的速度，单位为毫秒，默认值为200毫秒。如果参数省略，则采用默认速度。也可采用字符串形式："slow"、"normal"、"fast"
callback为可选参数，表示动画执行完成之后的回调函数。
//滑上和滑下，可以实现元素的显示与隐藏
}
（2）slideToggle()
{
slideToggle()方法来切换元素的“滑动状态”。也就是说，如果元素是滑下状态，则变成滑上状态；如果元素是滑上状态，则变成滑下状态。这个跟toggle()、fadeToggle()这两个方法是类似的。
$(selector).slideToggle(speed,callback)
//此函数中speed是可选参数，因为写不写speed并不会影响函数的动画效果
//slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。
speed:可选。规定元素从隐藏到可见的速度（或者相反）。默认为 "normal"。
可能的值：
毫秒 （比如 1500）
"slow"
"normal"
"fast"
//在设置速度的情况下，元素在切换的过程中，会逐渐地改变其高度（这样会创造滑动效果）。
callback:可选。toggle 函数执行完之后，要执行的函数。除非设置了 speed 参数，否则不能设置该参数。
}
//区分：show()、hide()和fadeIn()、fadeOut()和slideUp()、slideDown()
不同点：
（1）show()和hide()，是通过改变height、width、opacity、display来实现动画的显示与隐藏；
（2）fadeIn()和fadeOut()，通过改变opacity、display来实现动画的显示与隐藏；
（3）slideUp()、slideDown()，通过改变height、display来实现动画的滑上和滑下；
相同点：
这3组方法在动画显示与隐藏完成之后，都会设置display:none或者display:block。
//总结，对于显示和隐藏
分开的方法有：
（1）show()、hide()
（2）fadeIn()、fadeOut()
（3）slideUp()、slideDown()
与之对应的汇总方法有：
（1）toggle()
（2）fadeToggle()
（3）slideToggl()
以上三种为系统自带的动画效果，以下为自定义动画
（四）自定义动画
–>jQuery动画本质：jQuery动画其实就是通过将元素的某一个属性从“一个属性值”在指定时间内平滑地过渡到“另外一个属性值”来实现动画效果
–>对于自定义动画，我们可以使用animate()方法来实现。
一、简单动画
$().animate(params , speed , callback)
//params，必选参数，表示“属性:值”列表，也就是元素在动画中变化的属性列表；
//speed，可选参数，表示动画的速度，单位为毫秒，默认值为200毫秒。如果参数省略，则采用默认速度；
//例：
$("#id").click(function () {
$(this).animate({ "width": "100px", "height": "100px" ,"background-color":"red"}, 1000)
})
浅析params:
animate()方法的params参数是以键值对的形式存在，相当于json对象，params是动画的目标状态，语法如下：
{"属性1":"属性值1","属性2":"属性值2",……, "属性n":"属性值n"}
*注意：jquery库源码本身有一个缺陷，就是在调用animate()方法的时候无法识别color、background-color和border-color这些颜色属性，需要引入一个jquery.color.js来修复这个bug，jquery.color.js这个文件就可以完美解决animate()方法无法识别color和background-color、border-color等颜色属性值的问题。
*注意一点：由于jquery.color.js是依赖jQuery库而存在的，因此jquery.color.js文件必须放在jquery.1.12.0.min.js（jQuery库文件）后面引入，不然同样无效。
二、累积动画
//例：
$("#btn-sum").click(function () {
$("#sum").animate({ "width": "+=100px", "height": "+=100px" }, 1000);
})
//注意：代码中的width和height是有+=的
像这种具有"-="、"+="这种符号的，就是累积动画，表示以元素本身的width为基点进行“累加”
因为在css中设置了固定的width，这时，动画里面的width:"+=100px"就等价于width=width+"100px";相当于C语言中的-=和+=.
//这种累积动画可以一直进行下去，而简单动画只是设置了死板的最终状态
//回调函数浅析：
回调函数，指的是在动画执行完毕之后立即执行的函数。
至于存在原因，是因为有些效果需要动画结束后来实现
例如：
想在动画结束之后在div上加一个边框
错误方法：
$("#id").click(function () {
$(this).animate({ "width": "100px", "height": "100px" }, 1000).css("border", "5px solid red");
})
上面这个直接调用css()函数操作，是不对的，这个并不会实现在动画结束的时候加一个边框，因为css()方法并不会加入到“动画队列”中，而是立即执行。
这个时候就需要回调函数了，这样这个css()函数写在回调函数里面，就解决问题了
正确做法：
$(this).animate({ "width": "100px", "height": "100px" }, 1000, function () {
$(this).css("border", "5px solid red");
});
或者应用队列动画
$(this).animate({ "width": "100px", "height": "100px" }).animate({"border-width":"5px","border-style":"solid","border-color":"red"})
//注意：复合属性要分开写，不然没有效果
三、队列动画
队列动画指的是在元素中按照一定的顺序执行多个动画效果，即有多个animate()方法在元素中执行，然后根据这些animate()方法执行的先后顺序，形成了动画队列，然后按照这个动画队列的顺序来进行显示。
$().animate().animte()…….animte()
//队列动画，就是按照animate()方法定义（调用）的先后顺序来实现的
//队列动画包括之前我们所学到的4种动画形式：（1）显示和隐藏；（2）淡入和淡出；（3）滑上和滑下；（4）自定义动画。
也就是说，这些动画本质上都是通过animate()函数实现的，都能够加入到队列动画上
//例：
$(this).animate({ "width": "100px", "height": "100px" }, 1000).animate({ "background-color": "red" }, 1000).fadeOut(500);
四、动画停止
$().stop(clearQueue,gotoEnd)
clearQueue可选参数，取值为布尔值，默认false
gotoEnd可选参数，取值为布尔值。默认false。
参数clearQueue表示是否要清空“未执行”的“动画队列”。清空的是整个“动画队列”，而不仅仅是某一个动画。
参数gotoEnd，表示是否直接将正在执行的动画跳转到末状态。
//
stop() 等价于stop(false,false)，仅仅停止“当前执行”这段动画，后面的动画还可以继续执行
//当前动画就真的相当于暂停了，保持现状而不是到目标状态，然后执行下面的动画
stop(true) 等价于stop(true,false)，停止所有动画，包括当前执行的动画
//所有动画全部停止，保持现状
stop(true,true) 停止所有动画，但是允许执行当前动画
//所谓执行当前动画的意思是：在按停止的一瞬间，会直接到当前动画的目标状态，而没有任何先前设定的动画效果，以后动画不会执行
stop(false,true) 停止“当前执行”这段动画，直接无动画效果的到当前动画的目标状态，然后继续执行后面的动画
//上面的所谓停止，就是一种类似暂停状态（但不是真正的暂停），不继续向下执行。
//具体理解，看上面的参数（clearQueue,gotoEnd）介绍，很清楚
//应用stop()方法解决：（stop()方法与animate()相当于同级别，按顺序执行）
在鼠标移入一个div块的时候显示二级菜单，移出时二级菜单消失，中，如果鼠标速度过快，在二级菜单还未消失之前，又移入了，这样会继续执行二级菜单之前未执行完的消失动画，而不是显示动画
//浅析：
由于动画累积导致的，如果一个动画没有执行完，它就会被添加到“动画队列”中去。在这个例子中，每一次移入或者移出，都会添加新一个动画到“动画队列”中，然后没有执行完的动画会继续执行，直到所有动画执行完毕。
//解决方法：
我们只需要在移入动画或者移出动画执行之前加入stop()方法，就能解决这个问题。stop()方法会结束当前正在执行的动画，并立即执行队列中下一个动画。
$("#id").hover(function () {
$(this).stop(true).animate({ "width": "100px", "height": "100px" }, 500);
}, function () {
$(this).stop(true).animate({ "width": "50px", "height": "50px" }, 500);//移出时返回原状态
})
//分析：所谓正在队列中的动画，指的是以前的那些动画，现在stop()函数后面的动画是不在队列内的，所以stop(true)表示清空后面的动画队列，不跳转到当前动画的末状态，然后在执行stop(true)后面的动画
//总结：
1、对于jQuery动画，如果一个动画没有执行完就开始了一个新的动画，这个没有执行完的动画就会被添加到队列动画中。然后动画队列中每一个动画会按照顺序执行，知道所有动画执行完毕；
2、stop()方法在实际开发中唯一的用途：停止当前动画，防止动画累积的bug。
五、动画的延迟（delay()与animate()是同级的，一起调用时，按顺序执行）
$().delay(speed)
//参数speed（函数中是一个数字），表示动画的速度，单位为毫秒。
delay() 方法对队列中的下一项的执行设置延迟。
*注意delay()的用法：
$(this).animate({ "width": "200px" }, 1000).delay(1000).animate({ "height": "200px" }, 1000);
是静态加在两个动画之间的，用其他条件句啥的，先判断条件，在动态的加入，是不对的，
不过stop()就可以在条件句或者其他事件的情况下触发
例：
$("#btn-delay").click(function () {
console.log($("#id").delay(10000));
})//这样没有任何效果
$("#btn-stop").click(function () {
$("#id").stop();
})这样是正确的
六、判断动画状态
使用is()方法来判断所选元素是否正处于动画状态
if($().is(":animated"))
{
console.log("处于动画状态");
}
//例：
if(!$(" #content",this).is(":animated"))
{
$(" #content").animate({ "bottom": "-28px" }, 200);
}
//$("#content",this)<==>$(this).find($("#content"))