jquery - jQueryで背景色を変更します。デフォルトにリセット

Question

があり<ul>、jQuery UI Sortableを使用して、含まれているを並べ替えることができ<li>ます。

sは、<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

最初に元の値を別の変数に格納する必要があります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 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

Answer 3

非常にシンプルですが、アニメートしません

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