animate（）方法
用于創建自定義影片，
語法： $(selector).animate({params},speed,callback);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: greenyellow;
position: relative;
}
</style>
</head>
<body>
<button>點擊開始影片</button>
<div></div>
<script src="../jquery-3.6.0.js"></script>
<script>
$(document).ready(function(){
$('button').click(function(){
$('div').animate({left:'250px'});
})
})
</script>
</body>
</html>注意：在默認情況下，如果向移動某個元素的位置，那么就要把元素的position屬性設定為relative、fixed或者absolute
效果如圖：
使用animate()-操作多個屬性
$(document).ready(function(){
$('button').click(function(){
$('div').animate({
left:'250px',
opacity:'0.5',
height:'200px',
width:'200px'
});
});
});可以用animate()方法來操作所有的css樣式嗎？
基本都可以，只不過要用規定的語法去寫相對應的屬性名
例如：margin-top就要寫成 marginTop 類似于駝峰命名法
如果想要彩色的影片，可以從官網下載插件，并不包含在jQuery庫中
可以對animate()使用相對值
可以設定相對值（該元素的當前的值），只需要在值的前面加上 += 或 -=
$(document).ready(function(){
$('button').click(function(){
$('div').animate({
left:'250px',
width:'+=50px', //只需要在值的前面加上 += 或 -=
height:'+=50px',
});
});
});可以對animate()使用預定義值
就是可以把影片的屬性值設定成'show',"hide","toggle"實作影片效果
$(document).ready(function(){
$('button').click(function(){
$('div').animate({
height:'toggle', //設定"show"、"hide" 或 "toggle"也可以
});
});
});效果如下：
還可以對 animate() 使用佇列功能
就是可以呈現一個完整的影片效果
可以在這些方法中去呼叫的"內部"佇列，然后一個個的呼叫運行這些 animate ，
$(document).ready(function(){
$('button').click(function(){
var div = $('div');
div.animate({
height:'300px'
},'show');
div.animate({
width:'300px',
fontSize:'30px'
},'show');
div.animate({
height:'100px'
},'show');
div.animate({
width:'100px',
fontSize:'16px'
},'show');
});
});效果如下：
停止影片 stop()
用來中途暫停影片的執行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery-stop()停止影片</title>
<style>
#div1{
width: 100%;
height: 30px;
background-color: gray;
text-align: center;
}
#div2{
width: 100%;
height: 300px;
background-color: greenyellow;
text-align: center;padding-top: 135px;
box-sizing: border-box;
display: none;
}
</style>
</head>
<body>
<button>停止按鈕</button>
<div id="div1">點擊下滑整個盒子</div>
<div id="div2">這是一個大盒子</div>
<script src="../jquery-3.6.0.js"></script>
<script>
// 語法$(selector).stop(stopAll,goToEnd);
$(document).ready(function(){
$('#div1').click(function(){
$('#div2').slideDown(5000);
}),$('button').click(function(){
$('#div2').stop();
});
})
</script>
</body>
</html>卷簾影片效果實作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{
width: 100%;
height: 30px;
background-color: gray;
text-align: center;
}
#div2{
width: 100%;
height: 300px;
background-color: greenyellow;
text-align: center;
padding-top: 135px;
box-sizing: border-box;
display: none;
}
</style>
</head>
<body>
<button>停止按鈕</button>
<div id="div1">點擊下滑整個盒子</div>
<div id="div2">這是一個大盒子</div>
<script src="../jquery-3.6.0.js"></script>
<script>
// 語法$(selector).stop(stopAll,goToEnd);
$(document).ready(function(){
$('#div1').click(function(){
$('#div2').slideDown(5000);
$('#div2').slideUp(5000); //影片佇列停止影片測驗，只停止當前正在進行的影片，停止當前影片后，佇列中的下一個影片開始進行：
}),$('button').click(function(){
$('#div2').stop();//可以在 stop() 中設定 stopAll 的引數為 true，這樣就可以停止所有影片效果而不是只停止當前影片：
});
})
</script>
</body>
</html>效果如下：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/297689.html
標籤：其他
上一篇：JS經典案例之隨機生成驗證碼
下一篇：[JavaScript 刷題] Code Signal - 所有最長字串(all longest strings)