使用 jQuery 更改背景颜色。重置为默认

Question

我有一个<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 继承它应有的背景颜色）。我正在努力实现的目标是可能的吗？

Answer 1

不要使用 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