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

}; 

虽然，可以说这是比较复杂的。