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