jQuery複数のセレクタをアニメーション化する

Question

私はこの質問をどのようにフレーズするかわかりません。以下のコードは私が望む効果がありますが、完全に冗長で醜いので、少しエレガントにする方法がわかりません。私は成功していないwhileループを試しました。多分再帰関数か、これを行う良い方法がありますか？

このような何かがうまくいくかもしれない

function next() { 

$('#scroll_wrapper li:first-child').animate({ 
    'top' : -elemHeight-offSet 
}, {duration: 1000, queue: false, complete: nextDone}); 


$('#scroll_wrapper li:nth-child(2)').animate({ 
    'top' : offSet 
}, { duration: 1000, queue: false }); 

$('#scroll_wrapper li:nth-child(3)').animate({ 
    'top' : offSet2 
}, { duration: 1000, queue: false }); 

function nextDone() { 
    var d = $(this).detach(); 
    d.appendTo('#scroll_wrapper ul').css({'top' : elemHeight+100}); 
} 


} 

Answer 1

：

var next = function(){ 

    var nextDone = function(){ 
     var d = $(this).detach(); 
     d.appendTo('#scroll_wrapper ul').css({'top' : elemHeight+100}); 
    } 

    var animateElement = function(element, top, callback){ 
     $(element).animate({ 
      top: top 
     }, { duration: 1000, queue: false, complete: callback }); 
    }; 

    animateElement('#scroll_wrapper li:first-child', -elemHeight-offSet, nextDone); 
    animateElement('#scroll_wrapper li:nth-child(2)', offSet); 
    animateElement('#scroll_wrapper li:nth-child(3)', offSet2); 

}; 

ものの、間違いなくそれはより複雑です。