千锋逆战班，停课不停学！

1.隐藏显示

（1）运动轨迹：都是从左上角开始动画，显示是从左上角开始显示，隐藏是向左上角隐藏
（2）参数：
参数1 : 毫秒也就是动画的执行时间
参数2 : 运动的方式 linear 线性
参数3 : 回调函数当运动结束时,执行的函数程序
（3）显示隐藏与切换
标签对象.show() — 让隐藏的标签,显示
标签对象.hide() — 让显示的标签,隐藏
标签对象.toggle() —切换：隐藏—>显示显示—>隐藏
注：只能是 display: none;不能是透明度为 0

相应代码：

<style>
   button{
        display: block;
        margin: 0px auto 20px;
    }
    div{
        width: 200px;
        height: 200px;
        background: pink;
        margin: 0 auto;
        display: none;
    }
</style>

<body>
    <button name="block">点我出现</button><br>
    <button name="none">点我消失</button><br>
    <button name="toggle">点我切换</button><br>
    <div></div>
</body>

<script src="./jquery.min.js"></script>
<script>
    $('[name="block"]').click(function(){
        $('div').show(1000, 'linear' , function(){
            console.log('标签显示了')
        })
    })
    $('[name="none"]').click(function(){
        $('div').hide(1000, 'linear' , function(){
            console.log('标签隐藏了')
        })
    })
    $('[name="toggle"]').click(function(){
        $('div').toggle(1000, 'linear' , function(){
            console.log('标签切换了')
        })
    })
</script>

2.上拉下拉

（1）运动轨迹：从标签位置的上边距开始，显示:从上边距开始向下显示，隐藏:向上边距位置,上拉隐藏
（2）参数：
参数1 : 毫秒也就是动画的执行时间
参数2 : 运动的方式 linear 线性
参数3 : 回调函数当运动结束时,执行的函数程序
（3）显示隐藏与切换
标签对象.slideDown() — 下拉显示 / 出现
标签对象.slideUp() — 上拉隐藏 / 消失
标签对象.slideToggle() —隐藏显示切换
注：只能是 display: none;不能是透明度为 0

相应代码：

<style>
    button{
        display: block;
        margin: 0px auto 20px;
    }
    div{
        width: 200px;
        height: 200px;
        background: pink;
        margin: 0 auto;
        display: none;
    }
</style>

<body>
    <button name="block">点我下拉出现</button><br>
    <button name="none">点我上拉消失</button><br>
    <button name="toggle">点我上下切换</button><br>
    <div></div>
</body>

<script src="./jquery.min.js"></script>
<script>
    $('[name="block"]').click(function(){
        $('div').slideDown(1000, 'linear' , function(){
            console.log('标签下拉显示了')
        })
    })
    $('[name="none"]').click(function(){
        $('div').slideUp(1000, 'linear' , function(){
            console.log('标签上拉隐藏了')
        })
    })
    $('[name="toggle"]').click(function(){
        $('div').slideToggle(1000, 'linear' , function(){
            console.log('标签切换了')
        })
    })
</script>

3.渐隐渐现

（1）运动轨迹：从标签位置的上边距开始，显示:从上边距开始向下显示，隐藏:向上边距位置,
（2）参数：
参数1 : 毫秒也就是动画的执行时间
参数2 : 运动的方式 linear 线性
参数3 : 回调函数当运动结束时,执行的函数程序
（3）显示隐藏与切换
标签对象.fadeIn() — 显示 / 出现
标签对象.fadeOut() —隐藏 / 消失
标签对象.fadeToggle() —隐藏显示切换
注：只能是 display: none;不能是透明度为 0

相应代码：

 <style>
    button{
        display: block;
        margin: 0px auto 20px;
    }
    div{
        width: 200px;
        height: 200px;
        background: pink;
        margin: 0 auto;
        display: none;
    }
</style>

<body>
    <button name="block">点我逐渐出现</button><br>
    <button name="none">点我逐渐消失</button><br>
    <button name="toggle">点我逐渐切换</button><br>
    <div></div>
</body>

<script src="./jquery.min.js"></script>
<script>
    $('[name="block"]').click(function(){
        $('div').fadeIn(1000, 'linear' , function(){
            console.log('标签逐渐显示了')
        })
    })
    $('[name="none"]').click(function(){
        $('div').fadeOut(1000, 'linear' , function(){
            console.log('标签逐渐隐藏了')
        })
    })
    $('[name="toggle"]').click(function(){
        $('div').fadeToggle(1000, 'linear' , function(){
            console.log('标签切换了')
        })
    })
</script>

4.切换到指定透明度

（1）display: none; 和 opacity 都可以
（2）参数：
参数1 : 毫秒也就是动画的执行时间
参数2 : 透明度小数 0.5 .5 都可以
参数3 : 运动的方式 linear 线性
参数4 : 回调函数当运动结束时,执行的函数程序
（3）语法：标签对象.fadeTo()

相应代码：

 <style>
        button{
            display: block;
            margin: 0px auto 20px;
        }

        div{
            width: 200px;
            height: 200px;
            background: pink;
            margin: 0 auto;
            /* display: none; */
            opacity: 0;
        }
    </style>

<body>
   <button>点我切换到指定透明度</button><br>
   <div></div>
</body>

<script src="./jquery.min.js"></script>
<script>
    $('button').click(function(){
        $('div').fadeTo(1000 , .8 , 'linear' , function(){
            console.log('标签到指定透明度了')
        })
    })
</script>