自定义动画 jquery的结束动画

  <button name="width">改变宽</button>

    <button name="height">改变高</button>

    <button name="all">改变宽高</button>

    <div></div>

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

    <script>

        // 之前的动画效果,都是隐藏和出现的效果

        // 可以通过自定义动画,定义需要改变的属性和属性值,到达动画效果

        // 语法:

        // $().animate( {动画属性和属性值} , 动画时间 , 动画方式 , 动画结束回调函数 )

        // 有一些属性,动画效果是不支持的

        // 颜色 和 display

        // 颜色可以使用过渡来实现

        // display 可以先用透明度,逐渐消失,当运动结束时,直接设定属性为 none 或者 block

        $('[name="width"]').click(()=>{

            $('div').animate({width:500} , 2000 , 'linear' , ()=>{

                console.log('动画结束了')

            })

        }) 

        $('[name="height"]').click(()=>{

            $('div').animate({height:500} , 2000 , 'linear' , ()=>{

                console.log('动画结束了')

            })

        }) 

        $('[name="all"]').click(()=>{

            $('div').animate({height:'500px',width:500, opacity: 0} , 2000 , 'linear' , ()=>{

                console.log('动画结束了');

                // 当动画结束,设定样式为 none

                $('div').css({display:'none'});

            })

        }) 

 

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

    <div></div>

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

    <script>

        // jQuery的动画,如果点击过快,不会造成动画执行混乱

        // 会逐一将所有点击触发的动画,完全都执行完毕

        // 执行完上一个动画,再执行下一个动画,直到所有动画都执行完毕

        // stop()   立即终止上一个动画的执行,从当前运动位置,开始下一次动画

        // finish() 立即终止上一个动画的执行,从上一个运动终止位置,开始下一次动画

        $('[name="toggle"]').click(()=>{

            // 上一次动画没有执行结束,就触发了下一次动画

            // 会立即终止上次动画的执行,从当前位置开始,执行下一次动画

            // $('div').stop().slideToggle( 2000 , 'linear' , ()=>{

            //     console.log('动画结束了');

            // })

            // 上一次动画没有执行结束,就触发了下一次动画

            // 会立即终止上次动画的执行,从上一次动画应有的结束位置开始,执行下一次动画

            $('div').finish().slideToggle( 2000 , 'linear' , ()=>{

                console.log('动画结束了');

            })

        })

        // 总结: 触发下一次动画,上一次没有执行完的动画,怎么处理

        // 1, finish   stop  都要写在 运动函数之前

        //    表示终止的是 之后的 动画的响应的执行

        // 2, finish   stop  终止的是上一次动画的执行

        // 3, finish  上一次动画的终止位置开始,执行下一次动画

        //    stop    从当前位置开始,执行下一次动画