Jquery animer callback démarrer animer suivant

Question

Comment puis-je faire cela plus 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

En supposant que les choses que vous voulez animer sont tous sous le parent, vous pouvez nommer votre rappel Animer. ..puis, vous pouvez de nouveau déclencher l'animation depuis l'intérieur même.

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

Vous pouvez utiliser la récursivité:

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

OU TEMPORISATION:

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

Vous pouvez simplement utiliser le cycle avec setTimeout si votre animation est léger et avoir une bonne 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); 
}