hoverでfadeInさせると1pxずれる現象の対策です（ちなみにChromeでした）。hoverすると1pxずれる現象自体は割とよくあるみたいで、ブラウザによって対処方法が違います。

Chromeの場合

display: inline-block; を使う

要素に display: inline-block; の記述を追加したら、マウスオーバー時にズレが発生しなくなります。

backface-visibility: hidden; を使う

要素に backface-visibility: hidden; の記述を追加します。

参考：【CSS】transitionプロパティ使用時に、Chromeブラウザで1pxずれる現象を回避する)

Firefoxの場合

backgroundの指定を追記

以下を追記

background: #背景色カラー;

IEの場合

以下を追記

display: inline-block;
zoom: 1;

参考：opacityのマウスオンで画像が1pxズレるバグの解決方法

jQueryのfadeInを使っている場合

僕の場合、上記のものをすべてを試してもうまく行きませんでした。条件は、

fadeInをつかっていた。
css的に、display:table;でないとだめな箇所で、display:inline-block;が使えなかった。
transitionをつかっていた。
ブラウザはChrome。

で、fadeInをつかうことで、displayに変化が起こっているのかも、とおもったので、以下のように変えてみました。

$(function($){
  $("xxx").hover(function(){    

    $(this).find("yyy")
      .css({'visibility':'visible'}) // displayではなくvisibilityをつかう
      .animate({opacity: 1}, 200); // visibilityを出したあとにopacityを変化

},function(){

    $(this).find("yyy")
      .animate({opacity: 0}, 200) // 戻すときは逆
      .css({'visibility':'hidden'});

  })
});

結果直りました。displayがひとつのキーっぽいです。詳しい人教えてください。

[jQuery]hoverでfadeInさせると1pxずれる現象の対策