最近看過(guò)一段實(shí)現(xiàn)天貓購(gòu)物車(chē)動(dòng)畫(huà)效果的代碼窄绒，如果說(shuō)是一道數(shù)學(xué)題汞贸，也就是高一數(shù)學(xué)的水準(zhǔn)，但是把它放進(jìn)程序里面寫(xiě)出來(lái)可就費(fèi)勁了暗膜。當(dāng)然今天不去研究那個(gè)復(fù)雜的東西匀奏，我們就回顧一下并徹底弄清jquery animate動(dòng)畫(huà)的原理。
1 基本用法
$('...').animate(prop,speed,easing,callback)
- prop 類(lèi)似css3屬性參數(shù)学搜，是一個(gè)js對(duì)象娃善。
- speed 動(dòng)畫(huà)時(shí)間
- easing 緩動(dòng)函數(shù)，默認(rèn)是swing
- callback 動(dòng)畫(huà)結(jié)束的回調(diào)函數(shù)
廢話不多說(shuō)瑞佩，直接上代碼
<div id="clickme">
Click here
</div>
<img id="book" src="js/qwe.png" alt="" width="100" height="123"
style="position: relative; left: 10px;">
( "#clickme" ).click(function() {
$( "#book" ).animate({
opacity: 0.25,
left: "+=50",
height: "toggle"
}, 5000, function() {
// Animation complete.
});
});
我們可以看到prop就是一個(gè)css屬性的對(duì)象聚磺，不寫(xiě)easing默認(rèn)是swing效果，當(dāng)然你可以在5000后面寫(xiě)個(gè)linear炬丸，表示勻速效果瘫寝。
注意height:'toggle'就是高度變?yōu)?，然后又會(huì)變回來(lái)。
我們可以將上面代碼稍稍改一下：
var flag = true;
$( "#clickme" ).click(function() {
if(!$('#book').is(':animated')){
$( "#book" ).animate({
opacity: flag ? 0.25 : 1,
left: "+=50",
height: "toggle"
}, 1000,function() {
flag = !flag
});
}
});
is(':animated')判斷是否處于運(yùn)動(dòng)焕阿，如果是就不會(huì)執(zhí)行此次動(dòng)畫(huà)咪啡。
2 step function
這個(gè)用的比較少，知道就可以了
$('#book').animate({
opacity: .7,
height: '200px'
},
{
step: function(now, fx) {
var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
$('body').append('<div>' + data + '</div>');
}
});
book opacity: 0.9999259840548598
book height: 75.03083997714178
book opacity: 0.9997733646175807
book height: 75.09443140934138
.............................
book opacity: 0.7
book height: 200
.animate()提供了一個(gè)step選項(xiàng)- 每步動(dòng)畫(huà)執(zhí)行后調(diào)用的回調(diào)函數(shù)暮屡。
3 easing使用
這個(gè)是比較有用的瑟匆，在開(kāi)發(fā)中會(huì)碰到。
$('#clickme').click(function() {
$('#book').animate({
width: ['toggle', 'swing'],
height: ['toggle', 'linear'],
opacity: 'toggle'
}, 5000, function() {
$(this).after('<div>Animation complete.</div>');
});
});
如上代碼栽惶，我們可以看到，可以設(shè)置不同屬性漸變的參數(shù)疾嗅，width的效果是swing外厂，height的是linear，而opacity是后面寫(xiě)的linear代承。
jquery默認(rèn)只支持swing和linear汁蝶，我們?nèi)绾问褂闷渌弰?dòng)呢？
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
在jq之后引入這個(gè)js
$('#clickme').click(function() {
$('#book').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 5000,
specialEasing: {
width: 'easeInBounce',
height: 'easeOutBounce'
},
complete: function() {
$(this).after('<div>Animation complete.</div>');
}
});
});
注意這種寫(xiě)法论悴，duration掖棉，easing和callback都寫(xiě)在了個(gè)對(duì)象里。
我們可以發(fā)現(xiàn)膀估，所有的動(dòng)畫(huà)屬性都是在同時(shí)進(jìn)行幔亥，并且都是花費(fèi)相同的時(shí)間，如果我想分開(kāi)執(zhí)行呢察纯？
4 animate使用差異
<button id="go1">? Animate Block1</button>
<button id="go2">? Animate Block2</button>
<div id="block1">Block1</div>
<div id="block2">Block2</div>
$( "#go1" ).click(function(){
$( "#block1" ).animate( { width: "90%" }, { queue: false, duration: 3000 })
.animate({ fontSize: "24px" }, 1500 )
.animate({ borderRightWidth: "15px" }, 1500 );
});
$( "#go2" ).click(function(){
$( "#block2" ).animate({ width: "90%" }, 1000 )
.animate({ fontSize: "24px" }, 1000 )
.animate({ borderLeftWidth: "15px" }, 1000 );
});
// 這種情況是上一個(gè)執(zhí)行完了才下一個(gè)
如果對(duì)上面2種寫(xiě)法都清楚的話帕棉，就沒(méi)問(wèn)題了。解釋一下吧：
- queue等于false饼记，表示該元素下一個(gè)animate和上一個(gè)是一起執(zhí)行的香伴，就是說(shuō)寬度變?yōu)?0%和字體變?yōu)?4px是一起執(zhí)行的，所花時(shí)間不同而已具则。
下面給個(gè)例子結(jié)束了
<div class="rectangle">
<div class="square-small"></div>
</div>
<button id="animation-button">Run!</button>
<span id="percentage">0</span>%
$('#animation-button').click(function() {
var $button = $(this);
$('.rectangle')
.find('.square-small')
.animate({
left: 280
},
{
duration: 2000,
start: function() {
$button.prop('disabled', true);
},
complete: function() {
$button.prop('disabled', false);
},
progress: function(animation, progress) {
$('#percentage').text(Math.round(progress * 100));
}
}
);
});
大家可以自己去試一下喲即纲。。博肋。
