Monthai: jQuery动画stop()实践总结

Original 2018-11-12 21:40:37 306
abstract:stop()的用法       stop()含有两个参数,stop(stopAll,goToEnd),stopAll为true时,停止所有动作;goToEnd为true时,瞬间完成动作;(1)默认stop(false,false),停止当前动画,队列中其他动画可以继续;(2)stop(false,true),瞬间完成当前动作,队列内其他动

stop()的用法

       stop()含有两个参数,stop(stopAll,goToEnd),stopAll为true时,停止所有动作;goToEnd为true时,瞬间完成动作;

(1)默认stop(false,false),停止当前动画,队列中其他动画可以继续;

(2)stop(false,true),瞬间完成当前动作,队列内其他动作继续;

(3)stop(true,true),队列内所有动作全部瞬间完成。

(4)stop(true,false)是什么情况?stopAll所有都会停止,不会继续瞬间完成。

所谓队列

       即一个事件内触发多个动画,即使操作的对象是相同的;

$('#btn10').click(function(){
    $('#anm').animate({
        width:'500px', height:'400px',
        left:'200px', top:'300px',
        opacity:0.4
    },3000)
    $('#anm').animate({
        fontSize:'40px',
        textIndent:'2em'
    },3000)
})
//

       同一个button的click事件写两次也是可以的,不会报错,且效果跟上面一样。

$('#btn10').click(function(){
    $('#anm').animate({
        width:'500px', height:'400px',
        left:'200px', top:'300px',
        opacity:0.4
     },3000)
})
$('#btn10').click(function(){
     $('#anm').animate({
         fontSize:'40px',
         textIndent:'2em'
     },3000)
})

完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery动画</title>
        <script src="js/jquery-3.3.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#btn10').click(function(){
                    //动作①
                    $('#anm').animate({
                        width:'500px', height:'400px',
                        left:'200px', top:'300px',
                        opacity:0.4
                    },3000)
                        //动作②
                    $('#anm').animate({
                        fontSize:'40px',
                        textIndent:'2em'
                    },3000)
                })
                //停止
                $('#btn11').click(function(){
                    $('div').stop(false,true)
                })
            })
        </script>
    </head>
    <body>
        <button type="button" id="btn10">animate</button>
        <button type="button" id="btn11">stop</button>
        <div id="anm" style="height: 60px; width: 300px; background-color: darkseagreen; position: absolute;">
            <p>文字放大</p>
        </div>
    </body>
</html>

END

Correcting teacher:灭绝师太Correction time:2018-11-13 09:14:43
Teacher's summary:总结的很全面,理解的比较透彻,继续加油奥

Release Notes

Popular Entries