清除動畫和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重新排序後的樣式屬性

回答

相關問題