Changing background colour with jQuery. Reset to default

Question

I have a <ul>, in which I am using jQuery UI Sortable to allow the sorting of the contained <li>s.

The <li>s are styled with alternating background colours with :

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

I am using the Sortable start and stop functions to create a nice transition when the <li> is dragged like so:

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

My issue now, is that when we clear the background colour, it doesn't revert to the previous background colour (or inherit the background colour it should from the CSS). Is what I am trying to achieve possible?

Answer 1

Don't use jQuery to animate colors, use CSS transitions instead:

$( ".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