アニメーションとDOMの再注文後にスタイル属性をクリアする

Question

これはボードの移動のたびにタイルの位置を変更するボードゲームですが、画面のサイズが変更された場合、タイルの新しい位置は変更されません私はどこにいるのかと思っています。これは、animate()関数によって挿入されたstyle属性によって発生しますが、CSSがパーセンテージを使用してタイルの初期位置を設定し、関数がピクセルを使用するため、ページのサイズを変更するとタイルが間違った場所になります。

単純な解決方法（または私が思った）は、再配置の後にスタイル属性を削除することでしたが、それは期待どおりに機能しません。

詳細を追加するには、アニメーション機能を使用してタイルの位置を変更しますが、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>には「タイル」クラスが添付されています。

何か助けていただければ幸いです。

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により示唆されるように、私は「（）」を削除するために必要なので、括弧その機能はすぐには実行されないだろう。