javascript - JQuery .hover を使用した CSS Masonry Grid は、ホバーされた画像と最初の列以外のグリッド内の画像を非表示にします

Question

ブループリント フレームワーク テーマに基づいて koken のカスタム テーマを構築しています。アルバム テンプレートがアルバム内のすべての画像をループし、CSS と jquery スクリプトを使用して画像を 4 列の石積みのようなグリッドに出力するようにコーディングしました。画像にカーソルを合わせると、グリッド内の他のすべての画像の不透明度が 0.4 に変更されます。

グリッドを使用した jquery コードは JSFiddle で正常に動作しますが、それを koken テーマに持ち込むと、画像がホバーされるたびに、スクリプトが 1 秒間機能し、ホバーされた画像以外のすべての画像を不透明度を下げて表示しますが、それ以外のすべての画像を非表示にしますホバーされた画像と最初の列。

グリッドに使用されるコードは次のとおりです。

HTML

<main>
<div id="grid">
    <ul>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
        <li>
            <img src="http://placekitten.com/300/200" class="gridimg" />
        </li>
    </ul>
</div>

CSS

#grid {
    /* Prevent vertical gaps */
    line-height: 0;
    -webkit-column-count: 4;
    -webkit-column-gap: 0;
    -moz-column-count: 4;
    -moz-column-gap: 0;
    column-count: 4;
    column-gap: 0;
}
#grid img {
    /* Just in case there are inline attributes */
    width: 100% !important;
    height: auto !important;
}
#grid ul li {
    display: inline;
}
.gridimg {
    opacity:1;
    transition: opacity 0.5s;
}
.opaque {
    opacity:0.4;
    transition: opacity 0.5s;
}

JS

$('img.gridimg').hover(function () {
    $('img.gridimg').not(this).each(function () {
        $(this).toggleClass("opaque");
    });
});

JSFiddle はこちら: http://jsfiddle.net/jgYY9/3/

これを台無しにしているkokenコードに何かがありますか? そして、どうすれば修正できるか知っている人はいますか？

ありがとう。