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

jQuery停止動畫

jQuery停止動畫?

jQuery stop() 方法用于停止動畫或效果,在它們完成之前。

stop() 方法適用于所有 jQuery 效果函數(shù),包括滑動、淡入淡出和自定義動畫。

?語法:

$(selector).stop(stopAll,goToEnd);

? 可選的 stopAll 參數(shù)規(guī)定是否應該清除動畫隊列。默認是 false,即僅停止活動的動畫,允許任何排入隊列的動畫向后執(zhí)行。

? 可選的 goToEnd 參數(shù)規(guī)定是否立即完成當前動畫。默認是 false。

? 因此,默認地,stop() 會清除在被選元素上指定的當前動畫。

下面的例子演示 stop() 方法,不帶參數(shù):

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#flip").click(function(){
                $("#panel").slideDown(5000);
            });
            $("#stop").click(function(){
                $("#panel").stop();
            });
        });
    </script>

    <style type="text/css">
        #panel,#flip
        {
            padding:5px;
            text-align:center;
            background-color:#e5eecc;
            border:solid 1px #c3c3c3;
        }
        #panel
        {
            padding:50px;
            display:none;
        }
    </style>
</head>
<body>
<button id="stop">停止滑動</button>
<div id="flip">點擊這里,向下滑動面板</div>
<div id="panel">Hello world!</div>
</body>
</html>

QQ截圖20161024093648.png

繼續(xù)學習
||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Panel</title> <style type="text/css"> * { margin: 0; padding: 0; } body { font-size: 13px; line-height: 130%; padding: 60px } #panel { width: 60px; border: 1px solid #0050D0; height: 22px; overflow: hidden; } .head { padding: 5px; background: #96E555; cursor: pointer; width: 300px; } .content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0; display: block; width: 280px; } </style> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(function(){ $("button:eq(0)").click(function(){ $("#panel").animate({height:"150" }, 1000).animate({width:"300" }, 1000).hide(2000).animate({height:"show", width:"show", opacity:"show" }, 1000).animate({height:"500"}, 1000); }); //stop([clearQueue][,gotoEnd]); //語法結構 $("button:eq(1)").click(function(){ $("#panel").stop();//停止當前動畫,繼續(xù)下一個動畫 }); $("button:eq(2)").click(function(){ $("#panel").stop(true);//清除元素的所有動畫 }); $("button:eq(3)").click(function(){ $("#panel").stop(false, true);//讓當前動畫直接到達末狀態(tài) ,繼續(xù)下一個動畫 }); $("button:eq(4)").click(function(){ $("#panel").stop(true, true);//清除元素的所有動畫,讓當前動畫直接到達末狀態(tài) }); }) </script> </head> <body> <button>開始一連串動畫</button> <button>stop()</button> <button>stop(true)</button> <button>stop(false,true)</button> <button>stop(true,true)</button> <div id="panel"> <h5 class="head">什么是jQuery?</h5> <div class="content"> jQuery是繼Prototype之后又一個優(yōu)秀的JavaScript庫,它是一個由 John Resig 創(chuàng)建于2006年1月的開源項目。jQuery憑借簡潔的語法和跨平臺的兼容性,極大地簡化了JavaScript開發(fā)人員遍歷HTML文檔、操作DOM、處理事件、執(zhí)行動畫和開發(fā)Ajax。它獨特而又優(yōu)雅的代碼風格改變了JavaScript程序員的設計思路和編寫程序的方式。 </div> </div> </body> </html>
提交重置代碼