不能只在火狐上动摇<td>元素
Can't shake a <td> element just on Firefox
我正在使用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是唯一一个给我带来麻烦的人。哦,好吧。
相关文章:
- 如何在td元素中添加监听器
- 如何首先设置样式<td>表中包含在窗体中的元素
- 使用querySelector()获取最后一个td元素
- 更改<td>更改事件的元素值
- 使用 Jquery 选择一个 td 元素
- 将图像附加到没有 id 或值的 td 元素
- 除了最后一个<td>元素-Jquery
- td元素中带有传递参数的Javascript函数
- 将内联块元素居中,并在 td 内部使用链接
- 如何在点击tr的td后获取tr的id's元素
- 事件点击不在td元素中的多个锚点标记上处理同一个类
- 浏览器中的javascript和td元素事件属性
- 正在获取循环中td元素的tr id
- Jquery:选择tr元素的第二个td
- 正在查找表行中的td元素位置
- 使用setAttribute将id设置为元素最后一行的td
- 无法动态设置表的 td 元素的值
- td 元素上的 OnClick 函数返回第一列值和标头值
- td内部元素td的php-id
- 我需要什么CSS规则来隐藏"其子元素"td"'有子元素"input&qu