CODEWITHSUNDEEP
jquerygoogle-chromeanimation
user1392191
user1392191

Reputation: 117

jQuery animation opacity bug (move images)

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

};

Upvotes: 2

Views: 2658

Answers (2)

Firsh - justifiedgrid.com
Firsh - justifiedgrid.com

Reputation: 5667

Adding a background-color to the image seemed to be magically solve this for me. How weird. Note that it wasn't only with jQuery, when I changed the opacity from 1 to 0.99 in firebug, the image moved (shrank by 1px).

Upvotes: 1

Anton Boritskiy
Anton Boritskiy

Reputation: 1569

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.

Upvotes: 3

Related Questions