04-jQuery动画:基本动画函数、折叠动画、渐隐渐现动画函数、综合动画函数animate、运动结束函数

一、基本动画函数

show()显示、hide()隐藏、toggle()切换

动画效果：默认将元素从左上角向右下方向展示，隐藏是从右下角收回到左下角

toggle切换，本身是显示就隐藏，本身是隐藏就显示
他们三个都有三个共同的参数：

1、运动时间
2、运动曲线
3、运动结束的回调函数

$('div').show(1000,'linear',function(){console.log('结束了')})
$('div').hide(1000,'linear',function(){console.log('结束了')})
$('div').toggle(1000,'linear',function(){console.log('结束了')})

二 、折叠动画

sildeDown()显示、slideUp()隐藏、slideToggle()切换

动画效果：本质是改变元素高度，从上到下或从下到上的折叠元素，默认将元素从上到下展开显示，隐藏是从下到上收起来

sildeToggle切换，本身是显示就隐藏，本身是隐藏就显示
他们三个都有三个共同的参数：

1、运动时间
2、运动曲线
3、运动结束的回调函数

$('div').slideDown(1000,'linear',function(){console.log('结束了')})
$('div').slideUp(1000,'linear',function(){console.log('结束了')})
$('div').slideToggle(1000,'linear',function(){console.log('结束了')})

三、渐隐渐现动画函数

fadeIn()显示、fadeOut()隐藏、fadeToggle()切换、fadeTo()指定隐藏到的透明度

动画效果：本质改变元素opacity，元素慢慢呈现或消失，元素在视觉范围内不移动

前三个都有三个共同的参数：

1、运动时间
2、运动曲线
3、运动结束的回调函数

fadeTo(运动时间，指定的透明度，运动曲线，运动结束的回调函数)，表示运动到指定透明度，opacity从0到设定值停止

$('div').fadeIn(1000,'linear',function(){console.log('结束了')})
$('div').fadeOut(1000,'linear',function(){console.log('结束了')})
$('div').fadeToggle(1000,'linear',function(){console.log('结束了')})
$('div').fadeTo(1000,0.68,'linear',function(){console.log('结束了')})

四、综合动画函数

前三个都是动画的显示和隐藏，没有实际的运动，所以引出综合动画函数animate

animate()自定义设置动画
第一个参数：要运动的样式，以一个对象数据类型传递
第二个参数：运动时间
第三个参数：运动曲线
第四个参数：运动结束的回调函数

$('div').animate({
left: 500,
top: 600,
border-radius:50%
},1000,'linear',function(){'运动结束回调'})

注意：
关于颜色相关的属性不能运动
关于transform相关的属性不能运动

五、运动结束函数

stop()、finish()

由于我们多次触发动画函数，停止触发时，页面动画还未执行完，假设一次动画我们设置的时长为1000ms，我们快速点击十次按钮触发动画，点击结束后，页面动画还未执行完，会严格按照触发次数执行，直到全部执行完成才停止。

所以我们需要使用以下属性来控制触发结束后立即结束动画：

stop：
目前运动到什么位置就停在什么位置

$('div').stop()

一般用于运动开始之前，结束上一个动画。每次触发时都会把之前的动画停止下来，只执行本次最新的动画

$('div').stop().toggle(200)

finish：
立即结束当前所有运动，直接去运动结束位置

$('div').finish()

一般用于运动开始之前，会瞬间完成之前的动画，开始最新的，会在瞬间完成动画时出现动画一闪而过的情况

$('div').finish().toggle(200)