亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Monthai: jQuery動畫stop()實踐總結

Original 2018-11-12 21:40:37 308
abstrakt:stop()的用法       stop()含有兩個參數(shù),stop(stopAll,goToEnd),stopAll為true時,停止所有動作;goToEnd為true時,瞬間完成動作;(1)默認stop(false,false),停止當前動畫,隊列中其他動畫可以繼續(xù);(2)stop(false,true),瞬間完成當前動作,隊列內(nèi)其他動

stop()的用法

       stop()含有兩個參數(shù),stop(stopAll,goToEnd),stopAll為true時,停止所有動作;goToEnd為true時,瞬間完成動作;

(1)默認stop(false,false),停止當前動畫,隊列中其他動畫可以繼續(xù);

(2)stop(false,true),瞬間完成當前動作,隊列內(nèi)其他動作繼續(xù);

(3)stop(true,true),隊列內(nèi)所有動作全部瞬間完成。

(4)stop(true,false)是什么情況?stopAll所有都會停止,不會繼續(xù)瞬間完成。

所謂隊列

       即一個事件內(nèi)觸發(fā)多個動畫,即使操作的對象是相同的;

$('#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

Korrigierender Lehrer:滅絕師太Korrekturzeit:2018-11-13 09:14:43
Zusammenfassung des Lehrers:總結的很全面,理解的比較透徹,繼續(xù)加油奧

Versionshinweise

Beliebte Eintr?ge