Jquery: animate a list starting with the first going to the last, each starts to animate 45ms after the prev LI started

Question

http://jsfiddle.net/nicktheandroid/QSdUz/5/

I have a list of LI's, i'm trying to make them animate to the right 15px, done. The problem is, I want the first one to start, then 45ms later the next LI animates(the first LI will still be in mid animation when the next one starts), until it goes through all of them. Right now it waits until the first one completes, then animates the next one, which is wrong.

Can anyone show me how to correct this functionality to be what I described above?

$('UL').hover(function(){

    doSlide($('UL li:first'))

}, function() {

    doReverseSlide($('UL li:first'))

})

function doSlide(current) {
    $(current).animate({
        right:0
    },200).delay(45, function(){
            doSlide($(current).next('li'));           
    }) 


}

Answer 1

function doSlide(current) {
    $(current).animate({
        right:0
    },200);
    // mix some javascript in with your jQuery ;)
    setTimeout(function(){
            doSlide($(current).next('li'));           
    },45);
}

http://jsfiddle.net/QSdUz/6/

and with reverse

http://jsfiddle.net/QSdUz/7/

... I like the effect. Might use it myself for something.