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

};

不过，可以说它更复杂。