Question

我正在使用jQuery UI来动画内部的图像元素。

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

如果我试图摇动img，它会从一个错误的位置开始，但它有效。但我无法找到合适的CSS来让img在其原始位置开始动画。

以下是代码：

＆＃13;

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);
  });

}

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

是的，我正在玩Pokemons：）

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

Answer 1

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

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

无法在Firefox上撼动元素

1 个答案: