jquery动画回调开始next动画

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