我在使用 jQuery 1.7.1 的 FF10 中遇到了一个奇怪的问题。 我有一个画廊，可能缩小了图像，其中一些图像可以比原始尺寸缩放很多。
有时，当我尝试使用 jQuery 为其不透明度设置动画时，图像会“缩放”或跳到一侧。
举个例子，看看其中一个小例子，然后将鼠标悬停在它上面: http://jsfiddle.net/ZUWkh/
它可能非常微妙，但当不透明度动画化时，您可以看到图像发生变化 - 它似乎只影响已缩小到超过某一点的图像，因为我看不到它发生在更大的图像上这个例子。
您知道发生了什么以及如何克服它吗？
我像这样缩放它们只是为了将它们适合图库中的行 - 大小是用 PHP 计算出来的并且成比例。如果有差异，我可以使用 CSS 代替。
更新: 如果您调整浏览器窗口的大小或放大/缩小，问题就会发生变化 - 它没有得到解决，但被碰撞的图像发生了变化，因此其中一些在之后很好，而有些现在在动画时很好跳。
另一个更新: 我还注意到这似乎会影响抗锯齿，因为淡出的图像似乎是“锯齿状”，但在完全不透明时却很平滑。 FF 中的一些新功能可能会让图像看起来更漂亮？
另一个更新: 刚刚在 Chrome、Mac 上的 Safari 和 XP 上的 IE7 上进行了测试，此问题仅发生在 Mac 上的 FF10 上(不知道其他平台或版本)。奇怪...
又一个更新: 刚刚在XP上用FF9测试过，没有出现这个问题。然后我将其更新到FF10，问题就出现了。认为这对于错误报告来说可能足够强大......
最佳答案
找到了解决此问题的方法，不要问我为什么会这样或如何工作，但如果您使用以下方式设置图像样式
box-shadow: #000 0em 0em 0em;
这个问题神奇地消失了。 绝对与 Firefox 的抗锯齿功能有关，因为应用此样式后，当不透明度更改时，图像将保持抗锯齿状态。
除此之外，我不知道为什么会发生这种情况，也不知道为什么这个解决方案有效。
此外，在 IE7/8、safari、chrome 等浏览器中进行测试，没有任何问题。
更新 - 即使应用了这种样式，仅在 Firefox 中仍然看到此问题。有时可以提供帮助的另一种样式是 backface-visibility:hidden; - 请参阅此博客文章了解更多信息:http://css-tricks.com/almanac/properties/b/backface-visibility/
关于jQuery 淡入淡出图像与 HTML 调整大小有时会使它们移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9581071/