2

我有个问题。在我的网站中，我添加了一个效果：当有人悬停缩略图时，其他人的不透明度会通过 jQuery 动画降低。它在 FF 和 IE 中完美运行，在 Chrome 中存在一个问题：在动画期间，一些缩略图向左或向右移动 1px。

两个示例链接：first和second。

这是 jQuery 函数：

var GALLERIE = {
thumbHover : function(contenitore){
    var $immagini = $(contenitore).find('img');
    $immagini.parent('a').hover(
    function(){ $immagini.not($(this).find('img')).stop(true).animate({opacity:'0.8'},400)},
    function(){ $immagini.not($(this).find('img')).stop(true).animate({opacity:'1'},400)}
    )
}

};

4

2 回答 2

3

我只看第一个例子。

我注意到，即使只是将任何不同于 1 的不透明度设置为 img、父 a、parend td 或事件父 tbody，图像也会发生变化。我还注意到移位仅发生在第一列。第一列有一些奇怪的地方：左上角的图像是 146px x 216px，但它的父级 a 是 147px 宽。第一列中的其他元素也存在相同的差异。当我将左上角的样式更改为

position: relative;

左上元素的所有故障都消失了。可以说这个错误与表格单元格的 33% 宽度和块的 ceter-align 有某种联系。

于 2012-08-04T22:28:45.723 回答
1

为图像添加背景颜色似乎对我来说神奇地解决了这个问题。多么奇怪。请注意，不仅使用 jQuery，当我在 firebug 中将不透明度从 1 更改为 0.99 时，图像会移动（缩小 1px）。

于 2013-03-12T11:46:11.767 回答