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

这是一个棋盘游戏，其中瓷砖每次移动都会重新定位，但我遇到了问题，如果屏幕重新调整大小，瓷砖的新位置不是我打算他们在那里。这是由animate()函数插入的样式属性引起的，但由于CSS使用百分比来设置图块的初始位置，并且animate()函数使用像素，因此调整页面的大小会导致图块位于错误位置。清除动画和DOM重新排序后的样式属性

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

要添加更多细节，我使用动画函数来重新定位贴图，但是我必须重新排序DOM以及重新应用贴图类（例如，如果平铺50和平铺60是切换，我必须删除“tile50”类，并将其分配给以前为Tile60的<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>都附有“瓷砖”类。

任何帮助表示赞赏。

来源

2016-07-11 SuperCodeBrah

不确定问题是什么？ – guest271314

这结束了工作：

$('.'+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的建议，我需要删除“（）”括号以该函数不会立即执行。

来源

2016-07-11 01:36:22 SuperCodeBrah

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

回答

相关问题