.animate( properties [, duration ] [, easing ] [, complete ] )
properties是一個CSS屬性和值的對象,動畫將根據(jù)這組對象移動骤坐。
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
});
示例:
<div class="button">
<button id="animate">animate</button>
</div>
<div class="box">
<p>這是box里的內(nèi)容</p>
</div>
<script>
$("#animate").on("click",function(){
$(".box").animate({
width: "500px"
},5000);
console.log("這是點(diǎn)擊時出現(xiàn)的文字");
});
</script>
為了效果更明顯殖告，動畫的時間設(shè)置為5s沛简，可以看出控制臺輸出的文字在點(diǎn)擊按鈕是立即觸發(fā)，這說明了一個事情于样，即動畫方法animate不是同步的呐馆，而是異步的斯议，這就引申出了動畫隊列。
動畫的執(zhí)行不是同步的乞旦，而是加入到動畫隊列中贼穆，這樣就可以實(shí)現(xiàn)多個動畫效果連在一起，構(gòu)成一個連續(xù)的動畫兰粉。
queue()
queue()方法用來顯示在匹配的元素上的已經(jīng)執(zhí)行的函數(shù)隊列
queue([queueName])
queue()方法可以接受一個可選參數(shù)——一個含有隊列名的字符串故痊。該參數(shù)默認(rèn)是'fx'
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">開始動畫</button>
<button id="reset">恢復(fù)</button>
<span id="result"></span>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
history.go();
})
$('#btn').click(function(event){
setInterval(function(){
$('#result').html('隊列數(shù)是:' +$('#box').queue().length)
},100)
$('#box').animate({'left':'100px'},1000)
.animate({'width':'200px'},1000)
.animate({'left':'0'},1000)
.animate({'width':'100px'},1000);
});
</script>
queue(callback(next))
queue()方法可以接受一個回調(diào)函數(shù)作為參數(shù)，表示將要添加到隊列中的新函數(shù)
[注意]queue()方法的回調(diào)函數(shù)中玖姑，可以進(jìn)行樣式變換等愕秫，但不可以增加動畫效果
由下面代碼執(zhí)行結(jié)果可以看出，隊列執(zhí)行完函數(shù)后焰络，隊列后面的動畫效果被停止豫领，這時就需要用到下面要介紹的dequeue()方法。
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">開始動畫</button>
<button id="reset">恢復(fù)</button>
<span id="result"></span>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
history.go();
})
$('#btn').click(function(event){
setInterval(function(){
$('#result').html('隊列數(shù)是:' +$('#box').queue().length)
},100)
$('#box').animate({'left':'100px'},1000)
.animate({'width':'200px'},1000);
$('#box').queue(function(){
$('#box').css('background','lightgreen');
})
$('#box').animate({'left':'0'},1000)
.animate({'width':'100px'},1000);
});
</script>
dequeue()
dequeue()方法用來執(zhí)行匹配元素隊列的下一個函數(shù)
dequeue([queueName])
dequeue()方法可以接受一個可選參數(shù)——一個含有隊列名的字符串舔琅，默認(rèn)是fx
[注意]dequeue()方法本身也算隊列的一員
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">開始動畫</button>
<button id="reset">恢復(fù)</button>
<span id="result"></span>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
history.go();
})
$('#btn').click(function(event){
setInterval(function(){
$('#result').html('隊列數(shù)是:' +$('#box').queue().length)
},100)
$('#box').animate({'left':'100px'},1000)
.animate({'width':'200px'},1000);
$('#box').queue(function(){
$(this).css('background','lightgreen');
$(this).dequeue();
})
$('#box').animate({'left':'0'},1000)
.animate({'width':'100px'},1000);
});
</script>
clearQueue()
與deQueue()方法相反等恐，clearQueue()方法用來從列隊中移除所有未執(zhí)行的項
[注意]clearQueue()并不影響當(dāng)前動畫效果
clearQueue([queueName])
clearQueue()方法可以接受一個可選參數(shù)——一個含有隊列名的字符串，默認(rèn)是fx
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">開始動畫</button>
<button id="btn1">清除動畫</button>
<button id="reset">恢復(fù)</button>
<span id="result"></span>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
history.go();
})
$('#btn').click(function(event){
setInterval(function(){
$('#result').html('隊列數(shù)是:' +$('#box').queue().length)
},100)
$('#box').animate({'left':'100px'},1000)
.animate({'width':'200px'},1000);
$('#box').queue(function(){
$(this).css('background','lightgreen');
$(this).dequeue();
})
$('#box').animate({'left':'0'},1000)
.animate({'width':'100px'},1000);
});
$('#btn1').click(function(event){
$('#box').clearQueue();
})
</script>
finish()
停止當(dāng)前動畫备蚓，并清除動畫隊列中所有未完成的動畫,最終展示動畫隊列最后一幀的最終狀態(tài)课蔬。
stop()
停止當(dāng)前正在運(yùn)行的動畫
.stop( [clearQueue ] [, jumpToEnd ] )
參數(shù)為空：停止當(dāng)前動畫，執(zhí)行動畫隊列中的下一個動畫
[clearQueue ]：boolean類型郊尝，停止當(dāng)前正在進(jìn)行的動畫二跋，清空未執(zhí)行的動畫隊列，影響動畫效果
[, jumpToEnd ]：boolean類型流昏，停止當(dāng)前正在進(jìn)行的動畫扎即，清空未執(zhí)行的動畫隊列，并直接跳到本次動畫的結(jié)束
