詳解jQuery的animate動畫方法及動畫排隊問題解決
更新時間：2021年05月07日 09:41:53 作者：小白可別不舉鐵
這篇文章主要介紹了jQuery的animate動畫方法及動畫排隊問題解決的相關資料，幫助大家更好的理解和學習使用jQuery，感興趣的朋友可以了解下
animate（）動畫方法
- 作用：執(zhí)行css屬性集的自定義動畫
- 語法：$(selector).animate(styles,speed,easing,callback)
• 參數(shù)1： css 的屬性名和運動結束位置的屬性值的集合。
• 參數(shù)2：可選，規(guī)定動畫的速度，默認是 "normal"。其他值，“slow”、“normal”、“fast”，數(shù)字格式，單位為毫秒。
• 參數(shù)3：可選，規(guī)定在不同的動畫點中設置動畫速度的 easing 函數(shù)，值包含 swing（變速） 和linear（勻速）。
• 參數(shù)4：可選，animate 函數(shù)執(zhí)行完之后，要執(zhí)行的回調函數(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)
// 動畫的底部就是一個定時器，異步加載
// 非運動的代碼，關于同一個元素對象的，不會排隊
//$box1.css("height",200)
</script>
</body>
- 自帶動畫的顯示隱藏方法，如果設置給同一個元素，也有動畫排隊
//其他的運動方法，如果設置給同一個元素，也會發(fā)生排隊
$box2.mouseenter(function(){
$(this).children().slideUp(during)
})
$box2.mouseleave(function(){
$(this).children().slideDown(during)
})
//鼠標快速的移上移下，之后box2的灰色span就一直在滑進滑出，直到執(zhí)行完所有次數(shù)
- 同一個元素身上的運動，可以簡化成鏈式調用的方法
//同一個元素進行多個運動，可以簡化通過鏈式調用實現(xiàn) //但是還是要進行排隊 $box1.children().fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500)
delay（）延遲方法
- 將delay（）設置在某個運動方法之前，表示后面的運動要在規(guī)定的時間之后再執(zhí)行，有延遲運動的效果
- delay（）的參數(shù)是時間的數(shù)值，其他的運動方法也有延遲效果
//延遲 $box1.children().delay(3000).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500)
stop（）停止動畫方法
- 設置元素對象身上的排隊的動畫以何種方式進行停止
- stop（）有兩個參數(shù)，可以得到四種停止方式，參數(shù)都是布爾值
• 參數(shù)1：設置是否清空后面的動畫排隊，如果是 true 表示清空(后面還排著的動畫也一起被清除掉，不再執(zhí)行)，如果是 false 表示不清空只停止當前的一個動畫（后面的動畫立即開始執(zhí)行）。
• 參數(shù)2：設置當前動畫是否立即完成，如果是 true 表示立即完成，對象會立刻走到結束位置，如果是 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 清空后面排隊動畫 且 當前動畫立即完成，停到結束位置
$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 不清空后面動畫，當前運動立即到結尾
$btn4.click(function () {
$box1.stop(false, true);
})
</script>
</body>
- 默認情況下，參數(shù)值為false
- 實際工作中，一般要求清空后面的排隊，停止當前的位置，多使用stop（true），第二個參數(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對象，都能調用一個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）結合使用
$(this).children().stop(true).slideup(during);
})
- 有時候為了保險起見，函數(shù)節(jié)流使用時，也會與stop（true）結合使用
- stop（true）和函數(shù)節(jié)流方法，這兩種解決動畫積累問題的方法還是有區(qū)別的。stop方法可以使停止時，停在當前的位置，而函數(shù)節(jié)流，停止時return返回后，當前所處的動畫一般都是會執(zhí)行完的。
以上就是詳解jQuery的animate動畫方法及動畫排隊問題解決的詳細內容，更多關于jQuery animate動畫方法的資料請關注腳本之家其它相關文章！
相關文章
本文給大家介紹jquery ui tabs的理解,包括屬性、事件、方法和技巧等相關知識，對jquery ui tabs感興趣的朋友一起學習吧2015-11-11
jquery.combobox中文api和例子，修復了上面的小bug
關于jquery.combobox，這個jquery的插件從官網(wǎng)上直接下載下來使用還有bug，以下是我對其api做的簡單翻譯，而且修復了上面的bug。2011-03-03
JQuery 1.3.2以上版本中出現(xiàn)pareseerror錯誤的解決方法
最近正在做一個系統(tǒng)，測試組那邊不停的報告bug：后臺、前臺各種列表報告js彈出窗錯誤，內容僅僅是一句“pareseerror”！2011-01-01
jquery實現(xiàn)下拉菜單效果，jquery寫的仿京東導航菜單，一個經(jīng)典的左側多級導航菜單，學會了可以任意改變布局，感興趣的朋友可以參考下哈，希望對你有所幫助2013-04-04
Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可以讓網(wǎng)頁從別的域名（網(wǎng)站）那獲取資料，即跨域讀取數(shù)據(jù)，本文給大家簡單介紹jsonp 使用小結 ，需要的朋友參考下2016-01-01
jQuery 是一個快速、簡單的JavaScript library， 它簡化了HTML 文件的traversing，事件處理、動畫、Ajax 互動，從而方便了網(wǎng)頁制作的快速發(fā)展。 jQuery 是為改變你編寫JavaScript 的方式而設計的，本文給大家分享jquery validate初步體驗(一)，感興趣的朋友一起學習吧2015-12-12
JQuery中如何傳遞參數(shù)如click(),change()等具體實現(xiàn)
有個需求讓兩個select中option相互轉換,這個作業(yè)就是給幾個按鈕添加click()事件接下來為大家介紹下如何在click(),change()傳遞參數(shù)2013-04-04
圖片的展開和收縮使用jquery實現(xiàn)不可思議吧，感興趣的朋友可以參考下哈，希望對你學習jquery 有所幫助2013-04-04
本文主要介紹了無法獲取隱藏元素（display:none）寬度(width)和高度(height)的解決方案，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章給大家總結了使用jq獲取元素值的常見寫法,文中給大家介紹了詳細的代碼示例,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2023-12-12