2

我正在尝试使用 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/

我一直在祈祷，当我不知所措时，有人可以提供帮助！

提前致谢

4

0 回答 0