您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關(guān)如何解決jQuery中animate動畫方法及動畫排隊的問題,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
jquery是一個簡潔而快速的JavaScript庫,它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器,并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件,是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫,能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫,以便快速開發(fā)網(wǎng)站。
作用:執(zhí)行css屬性集的自定義動畫
語法:$(selector).animate(styles,speed,easing,callback)
? 參數(shù)1: css 的屬性名和運動結(jié)束位置的屬性值的集合。
? 參數(shù)2:可選,規(guī)定動畫的速度,默認是 "normal"。其他值,“slow”、“normal”、“fast”,數(shù)字格式,單位為毫秒。
? 參數(shù)3:可選,規(guī)定在不同的動畫點中設(shè)置動畫速度的 easing 函數(shù),值包含 swing(變速) 和linear(勻速)。
? 參數(shù)4:可選,animate 函數(shù)執(zhí)行完之后,要執(zhí)行的回調(diào)函數(shù)。
? 注意:
①所有有數(shù)值的屬性值都可以運動;
②其他的運動方法比如 slideUp() 等,也有參數(shù)3 和參數(shù)4
<style> *{ margin: 0; padding: 0; } p{ position: relative; left: 0; margin-bottom: 10px; background-color: skyblue; width: 50px; height: 50px; } </style> <!---------------------------------------> <body> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <script src="../jq/jquery-1.12.4.min.js"></script> <script> var $ps = $("p"); //實際操作中,將時間這種易變的存儲到一個變量中更好 var during = 1000; //所有有數(shù)值的屬性值都可以運動 $ps.click(function(){ $(this).animate({"width":500,"opacity":0.5},during,"swing") }) </script> </body>
同一個元素對象身上,如果定義了多個動畫,動畫會排隊等待執(zhí)行。
如果是不同的元素對象都有動畫,不會出現(xiàn)排隊機制。
如果是其他非運動的代碼,不會等待運動完成。比如,改變css樣式,不會排隊。
<style> div{ width: 100px; height: 100px; border: 8px solid #ccc; position: absolute; left: 0; top: 0; background: url(../../imgs/1.jpg) no-repeat center center; } .box2{ border-radius: 50%; overflow: hidden; } div span{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(221, 130, 130, 0.4); } </style> <!-------------css樣式-------------------> <body> <div class="box1"><span></span></div> <div class="box2"><span></span></div> <script src="../jq/jquery-1.12.4.min.js"></script> <script> var $box1 = $(".box1"); var $box2 = $(".box2"); var during = 2000; //動畫排隊對比 $box2.animate({"left": 400,"top":400},during) //box1、box2上各自進行各自的動畫 //同一元素上的多個動畫排隊 $box1.animate({"left": 400},during)//排隊 $box1.animate({"top": 400}, during) // 動畫的底部就是一個定時器,異步加載 // 非運動的代碼,關(guān)于同一個元素對象的,不會排隊 //$box1.css("height",200) </script> </body>
自帶動畫的顯示隱藏方法,如果設(shè)置給同一個元素,也有動畫排隊
//其他的運動方法,如果設(shè)置給同一個元素,也會發(fā)生排隊 $box2.mouseenter(function(){ $(this).children().slideUp(during) }) $box2.mouseleave(function(){ $(this).children().slideDown(during) }) //鼠標快速的移上移下,之后box2的灰色span就一直在滑進滑出,直到執(zhí)行完所有次數(shù)
同一個元素身上的運動,可以簡化成鏈式調(diào)用的方法
//同一個元素進行多個運動,可以簡化通過鏈式調(diào)用實現(xiàn) //但是還是要進行排隊 $box1.children().fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500)
將delay()設(shè)置在某個運動方法之前,表示后面的運動要在規(guī)定的時間之后再執(zhí)行,有延遲運動的效果
delay()的參數(shù)是時間的數(shù)值,其他的運動方法也有延遲效果
//延遲 $box1.children().delay(3000).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500)
設(shè)置元素對象身上的排隊的動畫以何種方式進行停止
stop()有兩個參數(shù),可以得到四種停止方式,參數(shù)都是布爾值
? 參數(shù)1:設(shè)置是否清空后面的動畫排隊,如果是 true 表示清空(后面還排著的動畫也一起被清除掉,不再執(zhí)行),如果是 false 表示不清空只停止當前的一個動畫(后面的動畫立即開始執(zhí)行)。
? 參數(shù)2:設(shè)置當前動畫是否立即完成,如果是 true 表示立即完成,對象會立刻走到結(jié)束位置,如果是 false 表示不完成當前動畫,立即停止在當前位置。
<style> div { width: 100px; height: 100px; border: 8px solid #ccc; position: absolute; left: 0; top: 40; background: url(../../imgs/1.jpg) no-repeat center center; } div span { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(221, 130, 130, 0.4); } </style> </head> <body> <input type="button" value="true true" id="btn1"> <input type="button" value="true false" id="btn2"> <input type="button" value="false false" id="btn3"> <input type="button" value="false true" id="btn4"><br> <div class="box1"><span></span></div> <script src="../jq/jquery-1.12.4.min.js"></script> <script> var $box1 = $(".box1"); var during = 2000; //同一元素上的多個動畫排隊 $box1.animate({ "left": 400 }, during) $box1.animate({ "top": 400 }, during) $box1.animate({"left":0},during) $box1.animate({"top":40},during) // 停止動畫 //添加按鈕點擊事件 var $btn1 = $("#btn1") var $btn2 = $("#btn2") var $btn3 = $("#btn3") var $btn4 = $("#btn4") //true true 清空后面排隊動畫 且 當前動畫立即完成,停到結(jié)束位置 $btn1.click(function () { $box1.stop(true, true); }) //true false 清空動畫 停在當前 $btn2.click(function () { $box1.stop(true, false); }) //false false 不清空后面動畫,停在當前 //然后執(zhí)行下一步動畫 $btn3.click(function () { $box1.stop(false, false); }) //false true 不清空后面動畫,當前運動立即到結(jié)尾 $btn4.click(function () { $box1.stop(false, true); }) </script> </body>
默認情況下,參數(shù)值為false
實際工作中,一般要求清空后面的排隊,停止當前的位置,多使用stop(true),第二個參數(shù)不設(shè)置默認為false
如果將開啟運動的程序放在一個事件函數(shù)中,事件多次被觸發(fā),會執(zhí)行多次函數(shù),就會在一個元素身上添加了多個動畫,會進行動畫排隊。(動畫積累問題)
需要去清除排隊的動畫,進行防騷擾操作。
解決方法
方法一:利用stop()方法
在每一個運動函數(shù)之前都增加一個stop(true),表示在運動執(zhí)行之前,會將前面排隊的動畫清空,然后停止在當前位置
<style> div { width: 100px; height: 100px; border: 8px solid #ccc; position: absolute; left: 0; top: 0; background: url(../../imgs/1.jpg) no-repeat center center; } div span { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(221, 130, 130, 0.4); } </style> <body> <input type="button" value="true true" id="btn1"> <input type="button" value="true false" id="btn2"> <input type="button" value="false false" id="btn3"> <input type="button" value="false true" id="btn4"><br> <div class="box1"><span></span></div> <script src="../jq/jquery-1.12.4.min.js"></script> <script> var $box1 = $(".box1"); var during = 2000; //清空動畫 $box1.mouseenter(function(){ $(this).children().stop(true).slideUp(during) }) $box1.mouseleave(function(){ $(this).children().stop(true).slideDown(during) }) </script> </body>
方法二:利用函數(shù)節(jié)流方法
如果元素在運動,直接return,不要執(zhí)行后面的運動代碼。
每個jQuery對象,都能調(diào)用一個is()方法,作用是顯示元素對象的某種狀態(tài)
如果參數(shù)位置是is(":animated"),animated是正在運動的意思,返回值是布爾值,true表示正在運動,false表示沒有運動
//函數(shù)節(jié)流方法 $box1.mouseenter(function(){ if(is(":animated")){ //如果判斷是正在運動的話,直接return返回,不再執(zhí)行其他動畫 return; } //沒有運動的話,則繼續(xù)執(zhí)行后面的新動畫 $(this).children().slideup(during); }) $box1.mouseenter(function(){ if(is(":animated")){ //如果判斷是正在運動的話,直接return返回,不再執(zhí)行其他動畫 return; } //沒有運動的話,則繼續(xù)執(zhí)行后面的新動畫 //有時候為了保險起見,會與stop(true)結(jié)合使用 $(this).children().stop(true).slideup(during); })
有時候為了保險起見,函數(shù)節(jié)流使用時,也會與stop(true)結(jié)合使用
stop(true)和函數(shù)節(jié)流方法,這兩種解決動畫積累問題的方法還是有區(qū)別的。stop方法可以使停止時,停在當前的位置,而函數(shù)節(jié)流,停止時return返回后,當前所處的動畫一般都是會執(zhí)行完的。
關(guān)于“如何解決jQuery中animate動畫方法及動畫排隊的問題”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。