Question

I have a problem. In my website I added an effect: when someone hover a thumbnail, other ones opacity is decreased with jQuery animation.
It perfectly works in FF and IE, in Chrome there is a problem: during animation, some thumbnails are moved 1px left or right.

Two example links: first and second.

And this is the jQuery function:

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

};

Answer 1

I was looking at the first example only.

I noted that image shifts even if simply set any opacity that differs from 1 to the img, parent a, parend td, or event parent tbody. I also notes that shift occurs only on the first column. There is some strange thing about first column: the left top image is 146px x 216px but its parent a is 147px wide. The same difference exists on other elements in first column.
When i changed the style of left top to

position: relative;

all glitches with left top element went away. one can say that this bug is somehow connected with 33% width of table-cell and ceter-align of the block.