jquery - 同じクラスの div 間でホバリングするときのちらつきを停止します

Question

クラスが動的に割り当てられた div の 3 つのグループがあります。ユーザーがいずれかの div にカーソルを合わせると、jQuery はクラスをチェックし、同じクラスの他のクラスをフェードします。これはうまく機能しますが、同じクラスの div 間を移動すると、毎回 jquery が起動するようです。おそらく、クラスを再チェックしてエフェクトを起動しているためです。

私の質問は、同じクラスの div 間を移動するときにちらつきを止めるにはどうすればよいですか?

div はすべて 1px のマージンで左にフロートされます。（ところでマージンを削除しようとしました）。

私のマークアップ:

<div id="projects">

   <div class="p-1">IMAGE</div>
   <div class="p-1">IMAGE</div>
   <div class="p-1">IMAGE</div>

   <div class="p-2">IMAGE</div>
   <div class="p-2">IMAGE</div>
   <div class="p-2">IMAGE</div>

   <div class="p-3">IMAGE</div>
   <div class="p-3">IMAGE</div>
   <div class="p-3">IMAGE</div>

</div> 

そして、jQuery

    $('#projects div[class^=p-]').hover(function() {
        $('#projects div[class=' + $(this).attr('class') + ']').fadeTo(200, 0.2, function() {
        });
    }, function() {
        $('#projects div[class=' + $(this).attr('class') + ']').fadeTo(200, 1.0, function() {
        });
    });

そしてフィドル：フィドル