版權聲明：本文為本人原創(chuàng)文章，轉載請附上原文出處鏈接和本聲明
本文鏈接：點開
（我不是廣告）這是一個來自地球的某個角落的人寫的一些神奇的事物，雖然網(wǎng)上資料繁多，但我的通俗易懂，來了就是賺到，就像馬云不認識你卻借你錢，我不認識你我卻給你。。。。。（比喻比喻）；
，。 、來我是個學生卻被逼無奈要成為一個作家，無妨無妨
首先交同學們移動，我們一步一步來，下面是我學習的理解出的，沒有那么官網(wǎng)，通俗易懂哦
以下都是用 一.1. 這個為例子
一.普通的平移
1.我們先寫HTML的代碼，在body里面寫
<body>
<button>開始動畫</button>//這是定義一個按鈕，名字叫開始動畫
<p>默認情況下，所有的 HTML 元素有一個靜態(tài)的位置，且是不可移動的。
如果需要改變?yōu)椋覀冃枰獙⒃氐?position 屬性設置為 relative, fixed, 或 absolute!</p>
<div style="background:#994455;height:100px;width:100px;position:absolute;">//定義它的背景顏色，寬高跟屬性
</div>
</body>
顯示的頁面就是這個樣子
2.然后咋們寫
翻譯：animate： 把…制作成動畫片
官方：animate() 方法用于創(chuàng)建自定義動畫
我：就是調用這個方法可以去改變當前的樣子
animate({left:'500px'})：就是讓它向右一定500px（像素）
<script>
$(function(){
$("button").click(function(){
$("div").animate({left:'500px'});
});
});
</script>
3.點擊開始動畫按鈕后：生動形象
4.然后總代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./jquery-3.3.1.js"></script>
<script>
$(function(){
$("button").click(function(){
$("div").animate({left:'500px'});
});
});
</script>
</head>
<body>
<button>開始動畫</button>
<p>默認情況下，所有的HTML元素有一個靜態(tài)的位置，且是不可移動的。 如果需要改變?yōu)?，我們需要將元素?position 屬性設置為 relative, fixed, 或 absolute</p>
<div style="background: #994455;height:150px;width:150px;position:absolute;"></div>
</body>
</html>
5.千萬不要抄代碼，要一步一步的去，最好記住，有思維的記住，不要記死代碼，這不是應付考試
一個小小的平移卻寫了這么多，當然我不會夸自己，我只是為了讓同學們更好地學習，更簡單。
二.平移中改變自身
1.animate() - 操作多個屬性：意思就是可以在平移的時候改變自身，比如：寬高，透明度
<script>
$(function () {
$("button").click(function () {
$("div").animate({
left: '250px',
opacity: '0.1',
height: '150px',
width: '150px'
});
});
});
</script>
效果前：
效果后：
2.animate() - 使用相對值
button按鈕可以一直點擊且有效 無線循環(huán)
<script>
$(function () {
$("button").click(function () {
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
});
</script>
3.animate() - 使用預定義的值
可以把屬性的動畫值設置為 "show"、"hide" 或 "toggle"：
show：顯示
hide：隱藏
toggle：顯示/隱藏
<script>
$(function () {
$("button").click(function () {
$("div").animate({
height: 'toggle'
});
});
});
</script>
4.jQuery animate() - 使用隊列功能
官方：這意味著如果您在彼此之后編寫多個 animate() 調用，jQuery 會創(chuàng)建包含這些方法調用的"內(nèi)部"隊列。然后逐一運行這些 animate 調用
我：一個一個運行，根據(jù)前一個改變自身，依次改變
<script>
$(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'500px',opacity:'0.5'},"slow");//寬度100不變，高度變?yōu)?00px，透明度為0.5
div.animate({width:'500px',opacity:'0.8'},"slow")//寬度變?yōu)?00，高度為500px，透明度為0.8
div.animate({height:'200px',opacity:'0.5'},"slow");//寬度為500，高度變?yōu)?00px，透明度為0.5
div.animate({width:'200px',opacity:'0.8'},"slow");//寬度變?yōu)?00，高度為200px，透明度為0.8
});
});
</script>
