javascript - 动画和 DOM 重新排序后清除样式属性

Question

这是一款棋盘游戏，每次移动时瓷砖都会重新定位，但我遇到了一个问题，即如果重新调整屏幕大小，瓷砖的新位置不是我想要的位置。这是由 animate() 插入的样式属性引起的功能，但因为 CSS 使用百分比来设置图 block 的初始位置和 animate()函数使用像素，调整页面大小会导致图 block 位于错误的位置。

简单的解决方案(或者我认为的)是在重新定位发生后删除样式属性，但这并没有按预期工作。

为了添加更多细节，我正在使用动画功能来重新定位图 block ，但我必须重新排序 DOM 以及重新应用图 block 类(例如，如果切换图 block 50 和图 block 60 ，我必须删除“tile50”类并将其分配给曾经是 Tile 60 的 <div>，反之亦然)。

游戏设置为让计算机在用户之后自动转一圈，但根据我现在的编码方式，它删除了所有“风格”属性，除了那些与计算机最后一步相关的属性(即，上次执行 animate 函数时遗留下来的样式属性)。我希望它删除所有样式属性。

代码如下:

function boardUpdate(tile1, tile2) {

    var thisPos = [$('.'+tile1).position().left, $('.'+tile1).position().top];
    var thatPos = [$('.'+tile2).position().left, $('.'+tile2).position().top];

    if (turn % 2 === 0) {
        if (!($('.'+tile1).hasClass("paired-odd") && 
            $('.'+tile2).hasClass("paired-odd"))) {
                $('.'+tile1).addClass('paired-even');
                $('.'+tile1).removeClass('paired-odd');
                $('.'+tile2).addClass('paired-even');
                $('.'+tile2).removeClass('paired-odd');
        } else {
            return;
        }           
    } else {
        if (!($('.'+tile1).hasClass("paired-even") && 
            $('.'+tile2).hasClass("paired-even"))) {
                $('.'+tile1).addClass('paired-odd');
                $('.'+tile1).removeClass('paired-even');
                $('.'+tile2).addClass('paired-odd');
                $('.'+tile2).removeClass('paired-even');
        } else {
            return;
        }
    }                   

    //Section below animates tiles, updates 'tileX' class, and reorders DOM for new 'tileX' classes

    $('.'+tile1).animate({left: thatPos[0]}, {queue: false}, tileCleanup());
    $('.'+tile1).animate({top: thatPos[1]}, {queue: false}, tileCleanup());
    $('.'+tile2).animate({left: thisPos[0]}, {queue: false}, tileCleanup());
    $('.'+tile2).animate({top: thisPos[1]}, {queue: false}, tileCleanup());

    var thisIndex = $('.'+tile1).index();
    var thatIndex = $('.'+tile2).index();

    selectedTiles = [thisIndex, thatIndex];

    if (thatIndex > 0) {
        $('.'+tile1).insertAfter('.tile'+thatIndex, tileCleanup());
    } else {
        $('.'+tile1).insertBefore('.tile2', tileCleanup());
    }
    if (thisIndex > 0) {
        $('.'+tile2).insertAfter('.tile'+thisIndex, tileCleanup());
    } else {
        $('.'+tile2).insertBefore('.tile2', tileCleanup());
    }

    $('.tile:nth-of-type('+(thatIndex + 1)+')').addClass(tile2);
    $('.tile:nth-of-type('+(thatIndex + 1)+')').removeClass(tile1);
    $('.tile:nth-of-type('+(thisIndex + 1)+')').addClass(tile1);
    $('.tile:nth-of-type('+(thisIndex + 1)+')').removeClass(tile2);

}

function tileCleanup() {
    console.log("cleaning up")
    $('.tile').removeAttr("style");
}

如您所见，我将 tileCleanup() 函数作为回调放在多个位置。我用 console.log() 验证了该函数每次都在运行，但我仍然遇到问题。

此外，澄清一下，每个图 block <div>附加了“tile”类。

感谢任何帮助。

Answer 1

这最终成功了:

$('.'+tile1).animate({left: thatPos[0]}, {queue: false, complete: tileCleanup});
$('.'+tile1).animate({top: thatPos[1]}, {queue: false, complete: tileCleanup});
$('.'+tile2).animate({left: thisPos[0]}, {queue: false, complete: tileCleanup});
$('.'+tile2).animate({top: thisPos[1]}, {queue: false, complete: tileCleanup});

我首先尝试使用“tileCleanup()”而不是“tileCleanup”，但根据用户 guest271314 的建议，我需要删除“()”括号，这样函数就不会立即执行。