javascript - Jquery animate 回调开始下一个动画

Question

我怎样才能更简单地做到这一点？

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

假设你想要动画的东西都在父级下，你可以命名你的动画回调......然后你可以从内部再次触发动画。

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

你可以使用递归：

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

或使用延迟：

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

setTimeout如果您的动画很轻并且具有良好的性能，您可以使用循环

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