Question

我正在尝试使用css过渡使过程更顺畅。

因此，当移动图块时，它会消失，然后在适当的位置逐渐消失。

为了简单起见，我已将示例代码更改为仅转换字体颜色更改

我有这个问题，我试图得到这个影响每一个移动的瓷砖，而不仅仅是直接的一个瓷砖

尽我所能我似乎无法在一次鼠标移动中重新触发效果。

如果我停下来并且重新拖动但是没有在拖动过程中移动的所有项目之间工作正常。（我希望有道理！）

我的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/

我保持手指交叉，有人可以帮助我，因为我在我的智慧结束！

提前致谢

Jquery可排序网格小部件翻转效果

0 个答案: