animate()とqueue()とstop()の備忘録まとめ

animate()

• animateの第二引数にオブジェクトをわたしqueueプロパティでfalseにすると並列して動く
• queue()に続くanimateはnext()で実行しなければいけない

dequeue()

• 引数にnextを渡し関数内でnext()ことで次に設定されているqueueを実行できる
• 第一引数にqueue名、dequequeの引数にして実行
• 配列に入れて関数を実行

stop()

• 第一引数trueは今のアニメーションを最後の状態にする。第二引数trueはキューの終了状態にする

$(function(){
//1
// $('#square').animate({width:'+=50px',height:'+=50px'}).delay(1000).animate({fontSize:'+=25px'});

//2
// $('#square').animate({width:'+=50px',height:'+=50px'}).animate({fontSize:'+=25px'},{queue:false});

//3
// $('#square').animate({height:'+=100px'});
// $('#square').queue(function(){
// $(this).animate({width:'+=100px'});
// });
// $('#square').dequeue();

//4
// $('#square').animate({
// width:'+=50px'
// });
// $('#square').queue(function(){
// $(this).animate({
// height:'+=50px'
// });
// });
// setTimeout(function(){
// $('#square').dequeue();
// },3000);

//5
// $('#square').queue(function(next){
// $(this).animate({height:'+=50px'});
// next();
// }).queue(function(){
// $(this).animate({height:'+=100px'});
// });
// $('#square').dequeue();

// 6
// $('#square').queue(function(next){
// $(this).animate({width:'+=100px'});
// next();
// });
// $('#square').animate({height:'+=50px'});

//7
// $('#square').queue([
// function(){$(this).animate({height:'+=100px'});},
// function(){$(this).animate({width:'+=100px'});}
// ]);
// $('#square').dequeue().dequeue();

//8
// $('#square').queue('myq',function(next){
// $(this).animate({height:'+=50px'});
// next();
// }).queue('myq',function(){
// $(this).animate({width:'+=100px'});
// });
// $('#square').dequeue('myq');
// $('#square').clearQueue('myq');

//9
// var speed = 1000;
// $('#square')
// .animate({height:'+=150px'},speed)
// .delay(speed/2)
// .animate({width:'+=150px'},speed);
// setTimeout(function(){
// $('#square').stop();
// },speed*2);

//10
// var speed = 3000;
// $('#square')
// .animate({width:'+=130px'},speed)
// .animate({height:'+=130px'},speed);
// setTimeout(function(){
// $('#square').stop(false,true);
// },speed/3);

//11
var speed = 3000;
$('#square')
.animate({width:'+=130px'},speed)
.animate({height:'+=130px'},speed);
setTimeout(function(){
$('#square').stop(true);
},speed/2);
});

「武骨日記」TOPページへ
全記事リンク集