jQuery的基本动画

一、基本效果 显示与隐藏
show()显示： 根据hide()方法记住的display属性值来显示元素。

• 无参版本 - 不具有动画效果
• show(speed,callback)有参版本 - 具有动画效果
• speed - 设置动画执行的时长,单位为毫秒
• 三个预定义值 - slow|normal|fast
• callback - 当动画执行完毕后执行的函数

hide() - 隐藏　将该元素的display样式改为 “none”。

• 无参版本 - 不具有动画效果
• hide(speed,callback)有参版本 - 具有动画效果

toggle() - 隐藏-显示切换

单纯的调用show()和hide()相当于css(“display”,“none/block/inline”),不会有任何动画。如果希望调用元素慢慢显示/消失，则可以为show()/hide()方法指定一个速度参数.

以毫秒为单位：
$("element").show("slow");     //元素将在600毫秒内慢慢地显示出来
$("element").show("normal");   //元素将在400毫秒内慢慢地显示出来
$("element").show("fast");     //元素将在200毫秒内慢慢地显示出来
$("element").hide("1000");     //元素将在1000毫秒(1秒)内慢慢地隐藏

对元素使用带参数的show()和hide()是从：高度，宽度，不透明度 三个属性同时进行操作的。

若对一个<div>(矩形)使用hide(600)。hide(600)会同时减少"矩形"的高度、宽度和不透明度，直到3个属性的值都为0，最后设置该元素的CSS规则为"display:none"。同理show(600)则会从该元素上到下增加“矩形”高度，左到右增大“矩形”的宽度，同时增加“矩形”的不透明度，直至矩形完全显示出来。

fadeIn()方法和fadeOut()方法

fadeIn()/fadeOut() 只改变元素的不透明度。
fadeOut() ：会在指定的一段时间内降低元素的不透明度，直到元素完全消失("display:none")。
fadeIn() ：会在指定的一段时间内降低元素的不透明度，直到元素完全消失("display:none")。

$('.btn1').click(function(){
    $('.content').fadeOut();
})
$('.btn2').click(function(){
    $('.content').fadeIn();
})

点击消失按钮，内容就会缓缓地消失，单击显示按钮，内容淡入。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200525000214680.gif#pic_center
slideUp()方法和slideDown()方法

slideUp()/slideDown()只改变元素的高度。
slideDown()：如果一个元素的display属性值为"none"，当调用slideDown()时，这个元素将由上至下延伸显示。
slideUp() ：与slideDown()完全相反。

$('.btn1').click(function(){
    $('.content').slideUp();
})
$('.btn2').click(function(){
    $('.content').slideDown();
})

单机消失，元素从下到上消失，点击显示，元素从上至下延伸展示。