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

Question

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

<li> s 的样式具有交替的背景颜色:

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

当 <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