jQuery-4.動畫篇---自定義動畫
jQuery中動畫animate(上)
有些復雜的動畫通過之前學到的幾個動畫函數是不能夠實現，這時候就需要強大的animate方法了
操作一個元素執行3秒的淡入動畫，對比一下2組動畫設置的區別
$(elem).fadeOut(3000)
$(elem).animate({
opacity:0
},3000)
顯而易見，animate方法更加靈活了，可以精確的控制樣式屬性從而執行動畫
語法：
.animate( properties ,[ duration ], [ easing ], [ complete ] ) .animate( properties, options )
.animate()方法允許我們在任意的數值的CSS屬性上創建動畫。2種語法使用，幾乎差不多了，唯一必要的屬性就是一組CSS屬性鍵值對。這組屬性和用於設置.css()方法的屬性鍵值對類似，除了屬性範圍做了更多限制。第二個參數開始可以單獨傳遞多個實參也可以合並成一個對象傳遞了
參數分解：
properties：一個或多個css屬性的鍵值對所構成的Object對象。要特別註意所有用於動畫的屬性必須是數字的，除非另有說明；這些屬性如果不是數字的將不能使用基本的jQuery功能。比如常見的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等這些都是能產生動畫效果的。background-color很明顯不可以，因為參數是red或者GBG這樣的值，非常用插件，否則正常情況下是不能只用動畫效果的。註意，CSS 樣式使用 DOM 名稱（比如 "fontSize"）來設置，而非 CSS 名稱（比如 "font-size"）。
特別註意單位，屬性值的單位像素（px）,除非另有說明。單位em 和 %需要指定使用
.animate({
left: 50,
width: ‘50px‘
opacity: ‘show‘,
fontSize: "10em",
}, 500);
除了定義數值，每個屬性能使用‘show‘, ‘hide‘, 和 ‘toggle‘。這些快捷方式允許定制隱藏和顯示動畫用來控制元素的顯示或隱藏
.animate({
width: "toggle"
});
如果提供一個以+= 或 -=開始的值，那麽目標值就是以這個屬性的當前值加上或者減去給定的數字來計算的
.animate({
left: ‘+=50px‘
}, "slow");
duration時間
動畫執行的時間，持續時間是以毫秒為單位的；值越大表示動畫執行的越慢，不是越快。還可以提供‘fast‘ 和 ‘slow‘字符串，分別表示持續時間為200 和 600毫秒。
easing動畫運動的算法
jQuery庫中默認調用 swing。如果需要其他的動畫算法，請查找相關的插件
complete回調
動畫完成時執行的函數，這個可以保證當前動畫確定完成後發會觸發
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
p {
color: red;
}
div{
width:200px;
height: 100px;
background-color: yellow;
color:red;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>animate(上)</h2>
<p>專註分享</p>
<div id="aaron">內部動畫</div>
點擊觀察動畫效果：
<select id="animation">
<option value="1">動畫1</option>
<option value="2">動畫2</option>
<option value="3">動畫3</option>
<option value="4">動畫4</option>
</select>
<input id="exec" type="button" value="執行動畫">
<script type="text/javascript">
$("#exec").click(function() {
var v = $("#animation").val();
var $aaron = $("#aaron");
if (v == "1") {
// 數值的單位默認是px
$aaron.animate({
width :300,
height :300
});
} else if (v == "2") {
// 在現有高度的基礎上增加100px
$aaron.animate({
width : "+=100px",
height : "+=100px"
});
} else if (v == "3") {
$aaron.animate({
fontSize: "5em"
}, 2000, function() {
alert("動畫 fontSize執行完畢!");
});
} else if (v == "4") {
//通過toggle參數切換高度
$aaron.animate({
width: "toggle"
});
}
});
</script>
jQuery中動畫animate(下)
animate在執行動畫中，如果需要觀察動畫的一些執行情況，或者在動畫進行中的某一時刻進行一些其他處理，我們可以通過animate提供的第二種設置語法，傳遞一個對象參數，可以拿到動畫執行狀態一些通知
.animate( properties, options )
options參數
- duration - 設置動畫執行的時間
- easing - 規定要使用的 easing 函數，過渡使用哪種緩動函數
- step：規定每個動畫的每一步完成之後要執行的函數
- progress：每一次動畫調用的時候會執行這個回調，就是一個進度的概念
- complete：動畫完成回調
其中最關鍵的一點就是：
如果多個元素執行動畫，回調將在每個匹配的元素上執行一次，不是作為整個動畫執行一次
列出常用的方式：
$(‘#elem‘).animate({
width: ‘toggle‘,
height: ‘toggle‘
}, {
duration: 5000,
specialEasing: {
width: ‘linear‘,
height: ‘easeOutBounce‘
},
complete: function() {
$(this).after(‘<div>Animation complete.</div>‘);
}
});
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
p {
color: red;
}
div {
width: 200px;
height: 100px;
background-color: yellow;
color: red;
}
a{
display: block
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>animate(下)</h2>
<p>專註分享</p>
<div id="aaron">內部動畫</div>
點擊觀察動畫效果：
<select id="animation">
<option value="1">動畫step動畫</option>
<option value="2">動畫progress回調</option>
</select>
<a></a>
<input id="exec" type="button" value="執行動畫">
<script type="text/javascript">
$("#exec").click(function() {
var v = $("#animation").val();
var $aaron = $("#aaron");
if (v == "1") {
//觀察每一次動畫的改變
$aaron.animate({
height: ‘50‘
}, {
duration :2000,
//每一個動畫都會調用
step: function(now, fx) {
$aaron.text(‘高度的改變值:‘+now)
}
})
} else if (v == "2") {
//觀察每一次進度的變化
$aaron.animate({
height: ‘50‘
}, {
duration :2000,
//每一步動畫完成後調用的一個函數，
//無論動畫屬性有多少，每個動畫元素都執行單獨的函數
progress: function(now, fx) {
$aaron.text(‘進度:‘+arguments[1])
// var data = fx.elem.id + ‘ ‘ + fx.prop + ‘: ‘ + now;
// alert(data)
}
})
}
});
</script>
jQuery中停止動畫stop
動畫在執行過程中是允許被暫停的，當一個元素調用.stop()方法，當前正在運行的動畫（如果有的話）立即停止
語法：
.stop( [clearQueue ], [ jumpToEnd ] ) .stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )
stop還有幾個可選的參數，簡單來說可以這3種情況
- .stop(); 停止當前動畫，點擊在暫停處繼續開始
- .stop(true); 如果同一元素調用多個動畫方法，尚未被執行的動畫被放置在元素的效果隊列中。這些動畫不會開始，直到第一個完成。當調用.stop()的時候，隊列中的下一個動畫立即開始。如果clearQueue參數提供true值,那麽在隊列中的動畫其余被刪除並永遠不會運行
- .stop(true,true); 當前動畫將停止，但該元素上的 CSS 屬性會被立刻修改成動畫的目標值
簡單的說：參考下面代碼、
$("#aaron").animate({
height: 300
}, 5000)
$("#aaron").animate({
width: 300
}, 5000)
$("#aaron").animate({
opacity: 0.6
}, 2000)
- stop()：只會停止第一個動畫，第二個第三個繼續
- stop(true)：停止第一個、第二個和第三個動畫
- stop(true ture)：停止動畫，直接跳到第一個動畫的最終狀態
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
p {
color: red;
}
div {
width: 200px;
height: 100px;
background-color: yellow;
color: red;
}
a{
display: block
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>stop</h2>
<p>專註分享</p>
<div id="aaron">內部動畫</div>
<input id="exec" type="button" value="執行動畫"><br /><br />
點擊觀察動畫效果：
<select id="animation">
<option value="1">stop()</option>
<option value="2">stop(true)</option>
<option value="3">stop(true,true)</option>
</select>
<a></a>
<input id="stop" type="button" value="停止動畫">
<script type="text/javascript">
//點擊執行動畫
$("#exec").click(function(){
$("#aaron").animate({
height: 300
}, 5000)
$("#aaron").animate({
width: 300
}, 5000)
$("#aaron").animate({
opacity: 0.6
}, 2000)
})
$("#stop").click(function() {
var v = $("#animation").val();
var $aaron = $("#aaron");
if (v == "1") {
//當前當前動畫
$aaron.stop()
} else if (v == "2") {
//停止所以隊列
$aaron.stop(true)
} else if (v == "3") {
//停止動畫，直接跳到當前動畫的結束
$aaron.stop(true,true)
}
});
</script>
</body>
jQuery-4.動畫篇---自定義動畫