上一篇我們介紹了一下jQ中自定義動畫animate()的使用方法,雖然說介紹的不夠詳細,但是基本上按照這個思路是可以使實大部份效果的,今天說一下如何停止當前的動畫效果,給他們做個停止的按鈕

jQuery中的stop()方法解釋

国产视频appstop():方法可以停止當前正在運行的動畫效果

語法

$(selector).stop(stopAll,goToEnd)

注:

国产视频appstopAll:可選,規定是否停止被選元素的所有加入隊列的動畫

goToEnd:可選,規定是否允許完成當前動畫

国产视频app舉例說明一下,兩個參數

設置三個按鈕來控制animate()動畫

HTML代碼

JQ.stop()方法可以停止正在執行的動畫

<button id='button'>開始</button>
<button id='button2'>停止當前</button>
<button id='button3'>停止所有</button>
<button id='button4'>完成當前并停止</button>
<!--飛鳥慕魚博客-->
<div style="width:400px;height:300px;background-color:green;">

JQ代碼

$("#button").click(function () {
    $("div").animate({width:"800px",height:"20px"},3000)
    .delay(2000)//兩個動畫之間的延遲
    .animate({ width: "600px", height: "400px" }, 3000);
});
$("#button2").click(function(){
    $("div").stop();
});
$("#button3").click(function () {
    $("div").stop(true);
});
$("#button4").click(function () {
    $("div").stop(true,true);
});

国产视频app我們通過對stop()各個參數的不同調用,可以實現不同的功能,停止動畫,停止當前動畫繼續下一個,快速完成當前動畫,并停止以后的動畫。

PS:如果本篇文章有錯誤,可以在下面的評論中提出哦!