jquery的折叠动画 渐隐渐显动画

 <button name="up">折叠隐藏</button>

    <button name="down">折叠显示</button>

    <button name="toggle">折叠切换</button>

    <div></div>

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

    <script>

        // jQuery的折叠动画

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

        // 隐藏消失

        // $().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('动画结束了');

            })

        })

 

 <button name="up">折叠隐藏</button>

    <button name="down">折叠显示</button>

    <button name="toggle">折叠切换</button>

    <div></div>

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

    <script>

        // jQuery的折叠动画

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

        // 隐藏消失

        // $().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('动画结束了');

            })

        })