jQuery的折叠动画，隐藏，显示，切换，

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

<button name="up">折叠隐藏</button>
<button name="down">折叠显示</button>
<button name="toggle">折叠切换</button>
<div></div>

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

<script>
    //如果有上间距,也会一起运动

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

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

    // 切换   显示变隐藏,隐藏变显示
    // $().slideToggle( 动画时间 , 动画方式 , 动画结束时回调函数 )

	//上卷，隐藏
    $('[name="up"]').click(()=>{
        $('div').slideUp( 2000 , 'linear' , ()=>{
            console.log('动画结束了');
        })
    })

	//放下，显示
    $('[name="down"]').click(()=>{
        $('div').slideDown( 2000 , 'linear' , ()=>{
            console.log('动画结束了');
        })
    })
	//上卷隐藏和下卷显示的切换
    $('[name="toggle"]').click(()=>{
        $('div').slideToggle( 2000 , 'linear' , ()=>{
            console.log('动画结束了');
        })
    })
</script>