内部に 20 個の div を持つ div があります。私がやっていることは、div:eq(1) から始めて左のものと交換し、div:eq(2)、div:eq(3) などを繰り返して左に交換することです。
この後、DOM は常に 1 ずれているため、この後は DOM が正しく更新されないようです。
アニメーションの完了後に div のクローンを作成するとうまくいくと思いましたが、うまくいきません。
DOM はその構造をライブ更新していないようです。 EDIT 最初にコードを提供しなかったことをお詫びします。最初のスワップ後にわかるように、「古い」div が使用されます。
$(function () {
var currentIndex = 0;
for (i = 0; i < 20; i++) {
$("#holder").append('<div class="number">' + i + '</div>');
}
function resetDivs(){
$("#holder div").css("border", "");
}
prepareForSwap();
function prepareForSwap() {
currentIndex++;
resetDivs();
div2 = $("#holder").find("div:eq(" + currentIndex + ")");
div1 = div2.prev();
div1.css("border", "3px solid blue");
div2.css("border", "3px solid red");
setTimeout(swap, 2000);
}
function swap() {
div1.animate({
left: "+=25"
}, 2000, function () {
});
div2.animate({
left: "-=25"
}, 2000, function () {
if(currentIndex < 20){
setTimeout(prepareForSwap,2000);
}
});
}
);