Pourquoi cela déplace-t-il les éléments 4 fois?

Pourquoi cela ne fonctionne-t-il pas correctement? L'effet que j'essaie de réaliser est que les blocs bougent de gauche à droite et commencent à "pousser" les suivants. Cela semble être un problème avec les callbacks imbriqués effectuant des animations sur les éléments externes.Pourquoi cela déplace-t-il les éléments 4 fois?

Quelqu'un peut-il expliquer cela? Ca fonctionne, mais tout bouge trop de fois.

<html> 
<head> 
<style> 
.item { width: 49px; height: 49px; border: 1px solid orange; background-color: #ccccff; } 
#i0 { position: absolute; left: 0px; } 
#i1 { position: absolute; left: 150px; } 
#i2 { position: absolute; left: 200px; } 
#i3 { position: absolute; left: 250px; } 
#i4 { position: absolute; left: 400px; } 
#i5 { position: absolute; left: 450px; } 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script> 
jQuery(function() { 
    $("#i0").animate({left:"+=100"}, function() { 
    $("#i0,#i1,#i2,#i3").animate({left:"+=100"}, function() { 
     $("#i0,#i1,#i2,#i3,#i4,#i5").animate({left:"+=50"}); 
    }); 
    }); 
}); 
</script> 
</head> 
<body> 
    <div id="i0" class="item"></div> 
    <div id="i1" class="item"></div> 
    <div id="i2" class="item"></div> 
    <div id="i3" class="item"></div> 
    <div id="i4" class="item"></div> 
    <div id="i5" class="item"></div> 
</body> 
</html>

Source

2009-03-20 Mark Renouf

Le deuxième argument de animate() est un callback qui est appelé lorsque l'animation est terminée. Puisque $ ("# i0, # i1, # i2, # i3"). Animate (..) anime 4 choses, il appelle son callback 4 fois. Une approche comme celle-ci pourrait fonctionner:

function move(i, left, callback) { 
    $("#i"+i).animate({left:left}, callback); 
} 

function sequence(n, left, callback) { 
    return function() { 
    var i = 0; 
    for (; i < n; i++) { 
     move(i, left); 
    } 
    move(i, left, callback); 
    } 
} 

jQuery(function() { move(0, "+=100", sequence(3, "+=100", sequence(5, "+=100"))) });

Source

2009-03-20 18:24:15 dstnbrkr

Pourriez-vous offrir une solution? Je voudrais un rappel une fois que tous les éléments ont fini d'animer. Comment pourrais-je faire ça? –

Pourquoi cela déplace-t-il les éléments 4 fois?

Répondre

Questions connexes