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

Monthai: jQuery動(dòng)畫(huà)stop()實(shí)踐總結(jié)

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

stop()的用法

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

(1)默認(rèn)stop(false,false),停止當(dāng)前動(dòng)畫(huà),隊(duì)列中其他動(dòng)畫(huà)可以繼續(xù);

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

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

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

所謂隊(duì)列

       即一個(gè)事件內(nèi)觸發(fā)多個(gè)動(dòng)畫(huà),即使操作的對(duì)象是相同的;

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

       同一個(gè)button的click事件寫(xiě)兩次也是可以的,不會(huì)報(bào)錯(cuò),且效果跟上面一樣。

$('#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動(dòng)畫(huà)</title>
        <script src="js/jquery-3.3.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#btn10').click(function(){
                    //動(dòng)作①
                    $('#anm').animate({
                        width:'500px', height:'400px',
                        left:'200px', top:'300px',
                        opacity:0.4
                    },3000)
                        //動(dòng)作②
                    $('#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

Guru membetulkan:滅絕師太Masa pembetulan:2018-11-13 09:14:43
Rumusan guru:總結(jié)的很全面,理解的比較透徹,繼續(xù)加油奧

Nota Keluaran

Penyertaan Popular