Change background color using jQuery. Default reset

Question

I have a <ul> in which I use jQuery UI Sortable to allow sorting of contained <li> s.

<li> decorated with alternating background colors using:

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

I use Sortable start and stop functions to create a nice transition when the <li> dragged like this:

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

Now my problem is that when we clear the background color, it does not return to the previous background color (or inherits the background color that it should from CSS). Am I trying to achieve something?

Answer 1

Do not 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

Answer 2

You must first save the original value in another variable, say originalcolor so

 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

Very simple but not animated

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