JQueryのanimate()、queue()、dequeue()、のリマインド
queueをfalseにすることでanimateと同時に実行
// 1 $(function(){
// $('#yellow').animate({width:'+=150px',height:'+=150px'},5000).animate({fontSize:'+=25px'},{queue:false});
// });
queueに設定した後、dequeueで実行
// 2 $(function(){
// $('#yellow').animate({height:'+=100px'});
// $('#yellow').queue(function(){
// $(this).animate({width:'+=100px'});
// });
// $('#yellow').dequeue();
// });
queueに設定した関数の引数にnextわたし、next()実行することで終わったら次のキューが実行
// 3 $(function(){
// $('#yellow').queue(function(next){
// $(this).animate({
// width:'+=1000'
// });
// next();
// });
// $('#yellow').animate({
// height:'+=200px'
// });
// // $('#yellow').dequeue();next()を使わない場合
// });
queueに配列オブジェクトとして関数を設定dequeueで実行
// 4 $(function(){
// $('#yellow').queue(
// [
// function(){
// $(this).animate({height:'+=100px'});
// },
// function(){
// $(this).animate({width:'+=1000px'});
// }
// ]);
// $('#yellow').dequeue().dequeue();
// });
queueに配列として設定実行
// 4 $(function(){
// $('#yellow').queue([
// function(){
// $(this).animate({
// width:'+=1000px',
// background:'#ff0'
// });
// },
// function(){
// $(this).animate({
// height:'+=200px',
// background:'#003'
// });
// }
// ]);
// $('#yellow').dequeue().dequeue().animate({
// height:'+=300px'
// });
// });
setTimeoutを設定して実行途中でstop()を実行
$(function(){
var yellow = $('#yellow');
for(var i = 0;i< 10;i++){
yellow.animate({width:'toggle'},{queue:'width',duration:'slow'});
yellow.animate({height:'toggle'},{queue:'height',duration:'slow'});
}
setTimeout(function(){
yellow.stop('width',true);
},4800);
setTimeout(function(){
yellow.stop('height',true);
},2400);
yellow.dequeue('width').dequeue('height');
});
1quque