不能只在火狐上动摇<td>元素

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

本文关键字:元素 td 火狐 不能      更新时间:2023-09-26

我正在使用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>

是的,我在玩口袋妖怪:)

那么,火狐有什么解决方法吗?

我使用了Michael C. Gates的建议,并将Divs放在给我带来麻烦的元素中。它现在工作正常。

仍然不知道为什么Firefox是唯一一个给我带来麻烦的人。哦,好吧。