少数の DIV をアニメーション化して上にスクロールしようとしていますが、一時停止した後に次々と上にスクロールしたいと考えています。そして、現時点で私が思いつく最高のものは
$('.curtain').each(function()
{
var $elem = $(this);
setTimeout(function()
{
$elem.animate({"height":0+'px'}, 2000);
}, 1000);
});
問題は、それらがまだすべて一時停止せずに一緒にアニメーション化されていることです。どうすればこの方法で何かを行うことができますか。div は動的に生成され、そのうち 5 ～ 20 個になる可能性があるため、ハードコードされたロジックを実行することはできません。アイデアはありますか?
function animateIt () {
var elems = $('.curtain').get();
(function next() {
if(elems.length){
var elem = $(elems.shift());
elem.animate({"height":0+'px'}, 2000, next);
}
})();
}
animateIt();
キューのような別の方法
function animateIt () {
var divs = $('.curtain');
divs.each( function(){
var elem = $(this);
$.queue(divs[0],"fun", function(next) { elem.animate({"height":0+'px'}, 2000, next); });
});
divs.eq(0).dequeue("fun");
}
ここでは、単純な再帰関数が機能するように見えます-
function doAnimation(elapsed){
var iterations = $('.curtain').length;
var current = elapsed+1;
if (current <= iterations){
setTimeout(function(){
$('.curtain:eq(' + elapsed + ')').animate(...);
doAnimation(current);
},50);
}
}
doAnimation(0);