jQuery动画回调回调开始下一个动画

Question

How can I do this more simple??

var i = 0;
    $(this).find(".ui-stars-star-on-large:eq("+i+")").animate({width: w+'px'}, 200, "swing", function() {
        i++;
        $(this).parent().find(".ui-stars-star-on-large:eq("+i+")").animate({width: w+'px'}, 200, "swing", function() {
            i++;
            $(this).parent().find(".ui-stars-star-on-large:eq("+i+")").animate({width: w+'px'}, 200, "swing", function() {
                i++;
                $(this).parent().find(".ui-stars-star-on-large:eq("+i+")").animate({width: w+'px'}, 200, "swing", function() {
                    i++;
                    $(this).parent().find(".ui-stars-star-on-large:eq("+i+")").animate({width: w+'px'}, 200, "swing", function() {
                        i++;
                    });
                });
            });
        });
    });

Answer 1

Assuming the things you want to animate are all under the parent, you could name your animate callback...then you can trigger the animation again from inside itself.

var $stars = $(this).children('.ui-stars-star-on-large');
var i = 0;

// wrap this whole block in a named function expression, so it can be re-called
(function nextStar() {
    // if you want the animations to loop, remove the if
    // and add a `i %= $stars.length;` after the jquery stuff
    if (i < $stars.length) {
        // .eq(i) works much like the ':eq('+i+')' selector, except
        // it's less hideous and doesn't require building selectors.  :P
        $stars.eq(i++).animate({width: w+'px'}, 200, 'swing', nextStar);
    }
// end the function and immediately call it, starting the first animation
})();

Answer 2

You could use recursion:

var w = 200;    
function animate(count, i) {
    $(this).find(".ui-stars-star-on-large:eq(" + i + ")").animate({
        width: w + "px"
    }, 200, "swing", function () {
        i++;
        if (i < count) animate(count, i);
    }}
}

animate(5, 1);

OR use delay:

for(var i = 0; i < 5; i++) {
     $(this).find(".ui-stars-star-on-large:eq(" + i + ")")
        .delay(i * 200)
        .animate({
            width: w + "px"
        }, 200, "swing")
}

Answer 3

You can just use cycle with setTimeout if your animation is light and have a good performance

var $this = $(this),
    $stars = $this.parent().find(".ui-stars-star-on-large");
for (var i = 0; i < 5; i++) {
    var _i = i;
    setTimeout(function(){
        $stars().eq(_i).animate({width: w+'px'}, 200, "swing")
   }, 200*i);
}