詳解jQuery的animate動畫方法及動畫排隊問題解決
阿新 • • 發佈:2021-05-07
animate()動畫方法
- 作用:執行css屬性集的自定義動畫
- 語法:$(selector).animate(styles,speed,easing,callback)
• 引數1: css 的屬性名和運動結束位置的屬性值的集合。
• 引數2:可選,規定動畫的速度,預設是 "normal"。其他值,“slow”、“normal”、“fast”,數字格式,單位為毫秒。
• 引數3:可選,規定在不同的動畫點中設定動畫速度的 easing 函式,值包含 swing(變速) 和linear(勻速)。
• 引數4:可選,animate 函式執行完之後,要執行的回撥函式。
①所有有數值的屬性值都可以運動;
②其他的運動方法比如 slideUp() 等,也有引數3 和引數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; //所有有數值的屬性值都可以運動 $ps.click(function(){ $(this).animate({"width":500,"opacity":0.5},during,"swing") }) </script> </body>
動畫排隊
- 同一個元素物件身上,如果定義了多個動畫,動畫會排隊等待執行。
- 如果是不同的元素物件都有動畫,不會出現排隊機制。
- 如果是其他非運動的程式碼,不會等待運動完成。比如,改變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,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>
<PxtNhF;/body>
- 自帶動畫的顯示隱藏方法,如果設定給同一個元素,也有動畫排隊
//其他的運動方法,如果設定給同一個元素,也會發生排隊 $box2.mouseenter(function(){ $(this).children().slideUp(during) }) $box2.mouseleave(function(){ $(this).children().slideDown(during) }) //滑鼠快速的移上移下,之後box2的灰色span就一直在滑進滑出,直到執行完所有次數
- 同一個元素身上的運動,可以簡化成鏈式呼叫的方法
//同一個元素進行多個運動,可以簡化通過鏈式呼叫實現 //但是還是要進行排隊 $box1.children().fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500)
delay()延遲方法
- 將delay()設定在某個運動方法之前,表示後面的運動要在規定的時間之後再執行,有延遲運動的效果
- delay()的引數是時間的數值,其他的運動方法也有延遲效果
//延遲 $box1.children().delay(3000).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500)
stop()停止動畫方法
- 設定元素物件身上的排隊的動畫以何種方式進行停止
- stop()有兩個引數,可以得到四種停止方式,引數都是布林值
• 引數1:設定是否清空後面的動畫排隊,如果是 true 表示清空(後面還排著的動畫也一起被清除掉,不再執行),如果是 false 表示不清空只停止當前的一個動畫(後面的動畫立即開始執行)。
• 引數2:設定當前動畫是否立即完成,如果是 true 表示立即完成,物件會立刻走到結束位置,如果是 false 表示不完成當前動畫,立即停止在當前位置。PxtNhF
<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,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 不清空後面動畫,停在當前
//然後執行下一步動畫
$btn3.click(function () {
$box1.stop(false,false);
})
//false true 不清空後面動畫,當前運動立即到結尾
$btn4.click(function () {
$box1.stop(false,true);
})
</script>
</body>
- 預設情況www.cppcns.com下,引數值為false
- 實際工作中,一般要求清空後面的排隊,停止當前的位置,多使用stop(true),第二個引數不設定預設為false
清空動畫排隊
動畫排隊問題
- 如果將開啟運動的程式放在一個事件函式中,事件多次被觸發,會執行多次函式,就會在一個元素身上添加了多個動畫,會進行動畫排隊。(動畫積累問題)
需要去清除排隊的動畫,進行防騷擾操作。
- 解決方法PxtNhF
方法一:利用stop()方法
在每一個運動函式之前都增加一個stop(true),表示在運動執行之前,會將前面排隊的動畫清空,然後停止在當前位置
<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,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>
方法二:利用函式節流方法
如果元素在運動,直接return,不要執行後面的運動程式碼。
每個jQuery物件,都能呼叫一個is()方法,作用是顯示元素物件的某種狀態
如果引數位置是is(":animated"),animated是正在運動的意思,返回值是布林值,true表示正在運動,false表示沒有運動
//函式節流方法 $box1.mouseenter(function(){ if(is(":animated")){ //如果判斷是正在運動的話,直接return返回,不再執行其他動畫 return; } //沒有運動的話,則繼續執行後面的新動畫 $(this).children().slideup(during); }) $box1.mouseenter(function(){ if(is(":animated")){ //如果判斷是正在運動的話,直接return返回,不再執行其他動畫 return; } //沒有運動的話,則繼續執行後面的新動畫 //有時候為了保險起見,會與stop(true)結合使用 $(this).children().stop(true).slideup(during); })
- 有時候為了保險起見,函式節流使用時,也會與stop(true)結合使用
- stop(true)和函式節流方法,這兩種解決動畫積累問題的方法還是有區別的。stop方法可以使停止時,停在當前的位置,而函式節流,停止時return返回後,當前所處的動畫一般都是會執行完的。
以上就是詳解jQuery的animate動畫方法及動畫排隊問題解決的詳細內容,更多關於jQuery animate動畫方法的資料請關注我們其它相關文章!