jQuery的标准动画，隐藏，显示和切换隐藏显示状态

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: pink;
            margin: 50px auto;
        }
    </style>

 <button name="hidden">隐藏</button>
<button name="show">显示</button>
<button name="toggle">切换</button>
<div></div>

<script src="./jquery.min.js"></script>
<script>

// 隐藏消失
// $().hide( 动画时间 , 动画方式 , 动画结束时回调函数 )

// 显示出现
// $().show( 动画时间 , 动画方式 , 动画结束时回调函数 )

// 切换 显示变隐藏,隐藏变显示
// $().toggle( 动画时间 , 动画方式 , 动画结束时回调函数 )
下面分别举例说明：

// 隐藏button,点击事件,点击后div块会向页面左上角移动，并且大小和透明度逐渐变小

$('[name="hidden"]').click(()=>{
    $('div').hide( 2000 , 'linear' , ()=>{
        console.log('动画结束了')
    })            
})

    // 显示button,点击事件，点击后div块会从页面左上角向设定的样式位置移动，
    //并且大小和透明度逐渐变大

$('[name="show"]').click(()=>{
    $('div').show( 2000 , 'linear' , ()=>{
        console.log('动画结束了')
    })            
})

    // 切换button,点击事件，显示变隐藏,隐藏变显示

$('[name="toggle"]').click(()=>{
    $('div').toggle( 2000 , 'linear' , ()=>{
        console.log('动画结束了')
    })            
})

</script>