Question

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

<li>的样式采用交替的背景颜色：

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

我正在使用Sortable启动和停止功能在拖动<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

Answer 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');
    }
});

Answer 3

很简单，但不会动画

$(ui.item).removeAttr("style");

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

3 个答案: