jquery - Jqueryソート可能なグリッドウィジェットのロールオーバー効果

Question

CSSトランジションを使用してプロセスをスムーズにしようとしています。

そのため、タイルを移動すると、消えて元の位置にフェードインします。

簡単にするために、サンプルコードを変更して、フォントの色を変更するだけにしました

私がこれを取得しようとしているという問題は、移動するすべてのタイルに影響を与えますが、すぐ右のタイルだけではありません

1回のマウスの動きで効果を再トリガーできないようです。

停止して再ドラッグすると問題なく動作しますが、ドラッグ中に移動するすべてのアイテムにまたがるわけではありません。（それが理にかなっていることを願っています！）

私のhtmlはここにあります

<ul id="sortable" class="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li></ul>

私のjsはここにあります

$(function () {
$("#sortable").sortable({
    sort: function (event, ui) {
        changeit = ui.item.nextAll('li.ui-state-default').eq(0);
        changeit.css({
            'color': 'blue',
                '-webkit-transition': 'color 0.5s ease-in',
                '-moz-transition': 'color 0.5s ease-in',
                '-o-transition': 'color 0.5s ease-in',
                'transition': 'color 0.5s ease-in'
        })
    }
});
$("#sortable").disableSelection();

});

そして私のcssはここにあります

   #sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 450px;
}

    .sortable li {
        margin: 3px 3px 3px 0;
        padding: 1px;
        float: left;
        width: 100px;
        height: 90px;
        font-size: 4em;
        text-align: center;
    }

ここでフィドルを設定しました http://jsfiddle.net/mw8Xu/21/

私は指を交差させ続けていますが、私は知恵が尽きているので誰かが助けることができます!

前もって感謝します