Question

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

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

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

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

以下是代码：

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>都附加了“图块”类。

感谢任何帮助。

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所建议的那样，我需要删除“（）”括号，以便函数不会立即执行。

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

1 个答案: