Javascript Jquery动画回调开始下一个动画

我怎样才能做得更简单

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

---

您可以使用递归：

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

var w=200；
函数动画（计数，i）{
$（这个）。查找（“.ui大星星：eq（“+i+”））。设置动画({
宽度：w+“px”
}，200，“摆动”，功能（）{
i++；
如果（i

或使用延迟：

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

for（变量i=0；i<5；i++）{
$（this.find（“.ui大星星：eq（“+i+”）”）
.延迟（i*200）
.制作动画({
宽度：w+“px”
}，200，“摇摆”）
}

您可以使用递归：

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

var w=200；
函数动画（计数，i）{
$（这个）。查找（“.ui大星星：eq（“+i+”））。设置动画({
宽度：w+“px”
}，200，“摆动”，功能（）{
i++；
如果（i

或使用延迟：

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

for（变量i=0；i<5；i++）{
$（this.find（“.ui大星星：eq（“+i+”）”）
.延迟（i*200）
.制作动画({
宽度：w+“px”
}，200，“摇摆”）
}

假设要设置动画的内容都在父项下，可以命名动画回调…然后可以从动画本身内部再次触发动画

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

var$stars=$（this）.children（'.ui stars on large'）；
var i=0；
//将整个块包装在一个命名函数表达式中，以便可以重新调用它
（函数nextStar（）{
//如果希望动画循环，请删除“如果”
//并在jquery内容之后添加一个'i%=$stars.length；'
如果（i<$stars.长度）{
//.eq（i）的工作原理与“：eq（“+i+”）”选择器非常相似，除了
//它不那么可怕，也不需要建筑物选择器。：P
$stars.eq（i++）.animate（{width:w+'px'}，200，'swing'，nextStar）；
}
//结束函数并立即调用它，开始第一个动画
})();

假设要设置动画的内容都在父项下，可以命名动画回调…然后可以从动画本身内部再次触发动画

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

var$stars=$（this）.children（'.ui stars on large'）；
var i=0；
//将整个块包装在一个命名函数表达式中，以便可以重新调用它
（函数nextStar（）{
//如果希望动画循环，请删除“如果”
//并在jquery内容之后添加一个'i%=$stars.length；'
如果（i<$stars.长度）{
//.eq（i）的工作原理与“：eq（“+i+”）”选择器非常相似，除了
//它不那么可怕，也不需要建筑物选择器。：P
$stars.eq（i++）.animate（{width:w+'px'}，200，'swing'，nextStar）；
}
//结束函数并立即调用它，开始第一个动画
})();

如果您的动画很轻且性能良好，您可以使用cycle with

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

var$this=$（this），
$stars=$this.parent（）.find（“.ui stars on large”）；
对于（变量i=0；i<5；i++）{
var_i=i；
setTimeout（函数（）{
$stars（）.eq（_i）.animate（{width:w+'px'}，200，“swing”）
}，200*i）；
}

如果您的动画很轻且性能良好，您可以使用cycle with

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

var$this=$（this），
$stars=$this.parent（）.find（“.ui stars on large”）；
对于（变量i=0；i<5；i++）{
var_i=i；
setTimeout（函数（）{
$stars（）.eq（_i）.animate（{width:w+'px'}，200，“swing”）
}，200*i）；
}

您需要显示您的标记。可能最好为此创建一个提琴来显示您的工作。哼，我会尝试并返回。我认为没有必要使用标记。看起来递归可能有帮助。您需要显示您的标记。可能最好为此创建一个提琴来显示您的工作。哼，我会尝试并返回。我不认为标记是必要的。看来递归在这里会有所帮助。