Edited at

jQuery animation が Promise を使って究極的にひゃっほいできて嬉しい

More than 3 years have passed since last update.


概要

es6 の async/await を使えば 最近 Promise を返すようになった jQuery に animation と何かと都合がよくかける

周知の事実かもしれないが嬉しいので書く


今まで

 $('.promise').animate({'width': '200px'}, 1000, function(){

$('.promise').animate({'width': '100px'}, 1000).promise();
});

とかネストしたり then とったり。


これから

function wide() {

return $('.promise').animate({'width': '200px'}, 1000).promise();
}

function short() {
return $('.promise').animate({'width': '100px'}, 1000).promise();
}

async function animate() {
for(var i=0; i<10; i++) {
await wide();
await short();
}
console.log('all done')
}
animate();

ウヒョヒョー

ネストもしないし最高。しかも 3.0系からは requestAnimation ベース。

なんて楽な時代になったんだろうか。。。


CodePen すぐ見るよう

http://codepen.io/anon/pen/mENrrm