jQuery Animate多個選擇器

Question

我甚至不知道如何解釋這個問題。下面的代碼具有我想要的效果，但它是完全多餘和醜陋的，我不確定如何使它更加優雅。我試過一段時間沒有成功。也許是遞歸函數還是有更好的方法來做到這一點？

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); 

}; 

雖然，可以說這是比較複雜的。