jquery基础学习之动画篇（四）

一，动画效果

---

hide() show() 隐藏与显示

hide(options) 隐藏 对应display:none,有参数就会变成动画，
$(document).click(function () {
// $('.div1').hide('slow');//慢速隐藏

})
hide(speed,callback)

toggle() 切换隐藏与显示

$(document).click(function () {
$('.div1').hide('slow',function () {
console.log(1)//完成后执行
//$('.div1').show('slow')//整个函数的意思是先隐藏，然后再显示，这句还能用下面的代替
$('.div1').toggle('slow')//取反
});

})

---

下拉与上卷动画

下拉动画 slideDown(speed,cb)
上卷动画slideUp(speed,cb)

$(document).click(function () {
$('.div2').add('.div3').slideUp(3000);
$('.div2').add('.div3').slideDown(3000);

})

 slideToggle() 上卷下拉切换 同toggle()

---

淡入淡出动画 fadeIn fadeOut

这个设置的是元素的opacity
fadeIn(speed,cb)

fadeToggle() 淡入淡出切换 用法都相同

$(document).click(function () {
$('.div4').fadeToggle(3000);
})

fadeTo(speed,opacity,cb)

淡入效果停到某一个透明值，不像前两个要么是0，要么是1

$(document).click(function () {
$('.div5').fadeTo(3000,0.5);//让效果到0.5透明度

})

jQuery中toggle与slideToggle以及fadeToggle的比较

toggle,对应的是show,hide,改变display
slideToggle,对应的是slideDown,slideUp ,改变的是height
fadeToggle,对应的是fadeIn,fadeOut,改变的是opacity

注意：

基本用法：函数名(speed,cb)
这些动画设置的slow 200 fast 600 默认 400
这些动画的如果隐藏了会不占用文档空间

---

animate 更强大的动画功能

//animate(参数，speed,cb)
参数必须是数字，可以是个对象，里面各种键值对，样式名称用dom名称，比如font-size写成fontSize吗
使用队列功能，一个元素的好几个animate会逐条执行，比如参数设置了变化宽，高，颜色，那么它执行的时候会先变宽，然后高，然后颜色，而不会直接一步到位

所谓队列，就像排队买东西一样，先来的先买，买完走人离开队列，最后来的排到最后面

animate( properties, options )
如果多个元素执行动画，回调将在每个匹配的元素上执行一次，不是作为整个动画执行一次

stop 停止动画
stop() 动画队列如果有多个动画,停止当前执行的动画,开始下一个动画
stop(true) 真正的停止,当前动画停止,队列里后续动画也不执行
stop(true,true) 当前动画动作停止，并且直接展示所有动画完成后的最终状态

动画里的回调

因为动画是异步的，如果一个函数不是他的回调，会先函数后动画，如果是回调，会先执行动画后函数