5

我有一个<ul>，我在其中使用 jQuery UI Sortable 来允许对包含<li>的 s 进行排序。

<li>s 使用交替的背景颜色设置样式：

.list-striped li:nth-child(odd) {
  background-color: #f9f9f9;
}

我正在使用 Sortable start 和 stop 函数在<li>拖动时创建一个很好的过渡，如下所示：

$( ".sortable" ).sortable({
        start: function(event, ui){
            $(ui.item).animate({
                'background-color': '#333333'
            }, 'fast');
        },
        stop: function(event, ui){
            $(ui.item).animate({
                'background-color': ''
            }, 'fast');
        }
    });

我现在的问题是，当我们清除背景颜色时，它不会恢复到以前的背景颜色（或从 CSS 继承它应该的背景颜色）。我想要实现的目标是可能的吗？

4

3 回答 3

2

不要使用 jQuery 为颜色设置动画，CSS transitions而是使用：

$( ".sortable" ).sortable();

CSS：

.list-striped li{
  width:200px;
  border:1px solid #ccc;
  padding:10px;
  transition: background 0.2s linear;
  -o-transition: background 0.2s linear;
  -moz-transition: background 0.2s linear;
  -webkit-transition: background 0.2s linear;
   cursor:pointer;
}
.list-striped li:nth-child(odd) {
  background-color: #faa;
}
.list-striped li.ui-sortable-helper{
  background-color:#a55 !important;
}

JSFiddle

于 2013-01-23T12:23:42.297 回答
2

你应该首先将原始值存储在另一个变量中，让我们这么originalcolor 说

var orginalcolor;
$( ".sortable" ).sortable({
    start: function(event, ui){
        orginalcolor = $(ui.item).css('background-color'); //store the color
        $(ui.item).animate({
            'background-color': '#333333'
        }, 'fast');
    },
    stop: function(event, ui){
        $(ui.item).animate({
            'background-color': originalcolor
        }, 'fast');
    }
});
于 2013-01-23T12:25:41.090 回答
0

非常简单，但不会动画

$(ui.item).removeAttr("style");
于 2014-01-01T18:11:26.650 回答