jQuery中動(dòng)畫animate(下)
animate在執(zhí)行動(dòng)畫中，如果需要觀察動(dòng)畫的一些執(zhí)行情況，或者在動(dòng)畫進(jìn)行中的某一時(shí)刻進(jìn)行一些其他處理，我們可以通過animate提供的第二種設(shè)置語法，傳遞一個(gè)對象參數(shù)，可以拿到動(dòng)畫執(zhí)行狀態(tài)一些通知
.animate( properties, options )
options參數(shù)
- duration - 設(shè)置動(dòng)畫執(zhí)行的時(shí)間
- easing - 規(guī)定要使用的 easing 函數(shù)，過渡使用哪種緩動(dòng)函數(shù)
- step：規(guī)定每個(gè)動(dòng)畫的每一步完成之后要執(zhí)行的函數(shù)
- progress：每一次動(dòng)畫調(diào)用的時(shí)候會執(zhí)行這個(gè)回調(diào)，就是一個(gè)進(jìn)度的概念
- complete：動(dòng)畫完成回調(diào)
其中最關(guān)鍵的一點(diǎn)就是：
如果多個(gè)元素執(zhí)行動(dòng)畫，回調(diào)將在每個(gè)匹配的元素上執(zhí)行一次，不是作為整個(gè)動(dòng)畫執(zhí)行一次
列出常用的方式：
$('#elem').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 5000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function() {
$(this).after('<div>Animation complete.</div>');
}
});
<!DOCTYPE html>
<html>
<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>慕課網(wǎng),專注分享</p>
<div id="aaron">內(nèi)部動(dòng)畫</div>
點(diǎn)擊觀察動(dòng)畫效果：
<select id="animation">
<option value="1">動(dòng)畫step動(dòng)畫</option>
<option value="2">動(dòng)畫progress回調(diào)</option>
</select>
<a></a>
<input id="exec" type="button" value="執(zhí)行動(dòng)畫">
<script type="text/javascript">
$("#exec").click(function() {
var v = $("#animation").val();
var $aaron = $("#aaron");
if (v == "1") {
//觀察每一次動(dòng)畫的改變
$aaron.animate({
height: '50'
}, {
duration :2000,
//每一個(gè)動(dòng)畫都會調(diào)用
step: function(now, fx) {
$aaron.text('高度的改變值:'+now)
}
})
} else if (v == "2") {
//觀察每一次進(jìn)度的變化
$aaron.animate({
height: '50'
}, {
duration :2000,
//每一步動(dòng)畫完成后調(diào)用的一個(gè)函數(shù)，
//無論動(dòng)畫屬性有多少，每個(gè)動(dòng)畫元素都執(zhí)行單獨(dú)的函數(shù)
progress: function(now, fx) {
$aaron.text('進(jìn)度:'+arguments[1])
// var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
// alert(data)
}
})
}
});
</script>
</body>
</html>
請驗(yàn)證，完成請求
由于請求次數(shù)過多，請先驗(yàn)證，完成再次請求
