无法仅在 Firefox 上摇动 <td> 元素

Question

我正在使用 jQuery UI 来抖动一些内部带有图像的元素。

它适用于 Chrome 和 IE，但不适用于 Firefox。

如果我尝试摇动 img，它会从错误的位置开始，但它有效。但是我找不到正确的 css 让 img 在它原来的位置开始它的动画。

代码如下：

function moveAnimations() {
  optionsPokemonOne = {
    effect: "shake",
    times: 1,
    direction: "left"
  };
  optionsPokemonTwo = {
    effect: "shake",
    times: 1,
    direction: "right"
  };

  img_pkm_attack = '/images/pokemon-attacks/' + pokemon1.toLowerCase() + '-2.gif';
  if (imageExist(img_pkm_attack)) {
    img_attack_tag = "<img src='" + img_pkm_attack + "' />";
    $("#pokemons_turn #pokemon1").empty().append(img_attack_tag);
  }
  $('#pokemon1').effect(optionsPokemonOne);

  img_pkm_attack = '/images/pokemon-attacks/' + pokemon2.toLowerCase() + '-2.gif';

  $('#pokemon1').promise().done(function() {
    if (imageExist(img_pkm_attack)) {
      img_attack_tag = "<img src='" + img_pkm_attack + "' />";
      $("#pokemons_turn #pokemon2").empty().append(img_attack_tag);
    }

    $('#pokemon2').effect(optionsPokemonTwo);

    setTimeout(restoreAnimations, 3000);
  });

}

#pokemons_turn {
  text-align: center;
  width: 760px;
  height: 320px;
  margin: 0 auto;
  border-radius: 10px;
}
#pokemons_turn td {
  padding: 12px 15px;
  border-bottom: 1px #999;
  width: 33%;
}
#pokemons_turn .text {
  font-weight: bold;
  font-size: 20px;
  -webkit-text-stroke: 1px black;
  text-shadow: 1px 1px 0 black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 3px 3px 5px black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="pokemons_turn">
  <tr>
    <td id="player1" class="text">
      <?php echo $playerOne; ?>
    </td>
    <td></td>
    <td id="player2" class="text">
      <?php echo $playerTwo; ?>
    </td>
  </tr>
  <tr>
    <td id="pokemon1" class="pokemon"></td>
    <td id="vs" class="text">VS</td>
    <td id="pokemon2" class="pokemon"></td>
  </tr>
  <tr>
    <td id="health1"></td>
    <td></td>
    <td id="health2"></td>
  </tr>
  <tr>
    <td id="pokemon1_name" class="text"></td>
    <td></td>
    <td id="pokemon2_name" class="text"></td>
  </tr>
</table>

是的，我正在玩口袋妖怪:)

那么，Firefox 有什么解决方法吗？

Answer 1

我采纳了 Michael C. Gates 的建议，将 Divs 放入给我带来麻烦的元素中。它现在工作正常。

仍然不知道为什么 Firefox 是唯一给我这个麻烦的。好吧。

无法仅在 Firefox 上摇动 <td> 元素

Can't shake a <td> element just on Firefox

javascript

jquery

css

jquery-ui

firefox