动画和 DOM 重新排序后清除样式属性答案

【问题标题】：Clearing style attribute after animation and DOM re-ordering动画和 DOM 重新排序后清除样式属性
【发布时间】：2016-11-12 20:39:02
【问题描述】：

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

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

为了添加更多细节，我使用 animate 函数重新定位图块，但我必须重新排序 DOM 并重新应用图块类（例如，如果图块 50 和图块 60 被切换，我必须删除“tile50”类并将其分配给曾经是 Tile 60 的 <div>，反之亦然。

游戏设置为让计算机在用户之后自动转动，但按照我现在的编码方式，它会删除所有“风格”属性，除了与计算机最后一步相关的属性（即，上次执行动画函数时留下的样式属性）。我希望它删除所有样式属性。

代码如下：

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() 验证了该函数每次都在运行，但我仍然遇到问题。

另外，澄清一下，每个磁贴 <div> 都附加了“磁贴”类。

感谢任何帮助。

【问题讨论】：

不确定问题是什么？

标签： javascript jquery css animation dom

【解决方案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 的建议，我需要删除“()”括号，以便函数不会立即执行。

【讨论】：