使用HTML调整大小的jQuery淡化图像使它们有时会移动

概述我在使用jQuery 1.7.1的FF10中遇到了一个奇怪的问题. 我有一个可能缩小图像的图库,其中一些可以从原始尺寸缩放相当多. 发生的事情是,有时候,当我尝试使用jQuery设置其不透明度的动画时,图像将“缩放”或跳转到一侧. 举个例子,看看其中一个小的,然后鼠标悬停在它上面： http://jsfiddle.net/ZUWkh/ 它可能非常微妙,但是当不透明度动画时,您可以看到图像发生变化 我在使用jquery 1.7.1的FF10中遇到了一个奇怪的问题.
我有一个可能缩小图像的图库,其中一些可以从原始尺寸缩放相当多.

发生的事情是,有时候,当我尝试使用jquery设置其不透明度的动画时,图像将“缩放”或跳转到一侧.

举个例子,看看其中一个小的,然后鼠标悬停在它上面：
http://jsfiddle.net/ZUWkh/

它可能非常微妙,但是当不透明度动画时,您可以看到图像发生变化 – 它似乎只会影响已缩小到某个点以上的图像,因为在这个示例中我看不到它发生在更大的图像上.

任何想法发生了什么,以及如何克服它？

我正在这样缩放它们只是为了使它们适合画廊中的行 – 大小是用PHP计算的并且是成比例的.如果存在差异,我可以使用CSS代替.

更新：
如果您调整浏览器窗口的大小,或者放大/缩小,问题会发生变化 – 它没有得到解决,但是碰撞的图像会发生变化,因此其中一些很好,之后一些很好,现在可以在动画时跳转.

另一个更新：
我也注意到这似乎影响了抗锯齿,因为淡化的图像似乎是“锯齿状”,但在完全不透明时是平滑的. FF中的一些新东西可能会使图像看起来更漂亮吗？

又一次更新：
刚刚在Chrome,Mac上的Safari和XP上的ie7上进行过测试,这个问题只发生在Mac上的FF10上(不了解其他平台或版本).奇怪…

还有另一个更新：
刚刚在带有FF9的XP上测试过,这个问题不会发生.然后我将其更新为FF10,然后出现问题.认为这可能足够强大的BUG报告……

@H_502_34@解决方法 想出了一个解决方案,不要问我为什么这样做或如何,但如果你用图像设置样式

Box-shadow: #000 0em 0em 0em;

这个问题神奇地消失了.
绝对与firefox所做的任何抗锯齿 *** 作一样,因为应用了这种样式,当不透明度改变时,图像保持抗锯齿.

除此之外,我不知道为什么会发生这种情况或为什么这个解决方案有效.

此外,在ie7 / 8,safari,Chrome等测试没有问题.

更新 – 即使已应用此样式,仍会在firefox中看到此问题.另一种有时可以帮助的风格是背面可视性：隐藏; – 有关详细信息,请参阅此博客文章：http://css-tricks.com/almanac/properties/b/backface-visibility/

总结

以上是内存溢出为你收集整理的使用HTML调整大小的jQuery淡化图像使它们有时会移动全部内容，希望文章能够帮你解决使用HTML调整大小的jQuery淡化图像使它们有时会移动所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。