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="https://www.cnblogs.com/dreamtown/archive/2021/04/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, 130, 0.4);
}
</style>
<!-------------css樣式------------------->
<body>
<div ><span></span></div>
<div ><span></span></div>
<script src="https://www.cnblogs.com/dreamtown/archive/2021/04/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>
- 自帶影片的顯示隱藏方法，如果設定給同一個元素，也有影片排隊
//其他的運動方法，如果設定給同一個元素，也會發生排隊
$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 表示不完成當前影片，立即停止在當前位置，
<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="https://www.cnblogs.com/dreamtown/archive/2021/04/03/true true" id="btn1">
<input type="button" value="https://www.cnblogs.com/dreamtown/archive/2021/04/03/true false" id="btn2">
<input type="button" value="https://www.cnblogs.com/dreamtown/archive/2021/04/03/false false" id="btn3">
<input type="button" value="https://www.cnblogs.com/dreamtown/archive/2021/04/03/false true" id="btn4"><br>
<div ><span></span></div>
<script src="https://www.cnblogs.com/dreamtown/archive/2021/04/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>
- 默認情況下，引數值為false
- 實際作業中，一般要求清空后面的排隊，停止當前的位置，多使用stop（true），第二個引數不設定默認為false
清空影片排隊
影片排隊問題
-
如果將開啟運動的程式放在一個事件函式中，事件多次被觸發，會執行多次函式，就會在一個元素身上添加了多個影片，會進行影片排隊，(影片積累問題)
需要去清除排隊的影片，進行防騷擾操作，
-
解決方法
方法一：利用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, 130, 130, 0.4);
}
</style>
<body>
<input type="button" value="https://www.cnblogs.com/dreamtown/archive/2021/04/03/true true" id="btn1">
<input type="button" value="https://www.cnblogs.com/dreamtown/archive/2021/04/03/true false" id="btn2">
<input type="button" value="https://www.cnblogs.com/dreamtown/archive/2021/04/03/false false" id="btn3">
<input type="button" value="https://www.cnblogs.com/dreamtown/archive/2021/04/03/false true" id="btn4"><br>
<div ><span></span></div>
<script src="https://www.cnblogs.com/dreamtown/archive/2021/04/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回傳后，當前所處的影片一般都是會執行完的，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/272151.html
標籤：其他