我有一个 div,里面有 20 个 div。我正在做的是从 div:eq(1) 开始并将其与左边的交换,然后重复 div:eq(2)、div:eq(3) 等并交换到左边。
似乎 DOM 在此之后没有正确更新,因为在此之后它们总是关闭 1。
我想也许在动画完成后克隆 div 会起作用,但它不会。
似乎 DOM 不会实时更新它的结构? 编辑 很抱歉最初没有提供代码。正如您在第一次交换后看到的那样,它使用“旧”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);
}
});
}
);