jQuery animate background colors on click

Question

I am using jQuery UI to animate background colors. I have a list of 5 items with background colors. Each li has a different background color, specified in css like this:

li:nth-child(1) {
    background-color: rgb(147, 215, 224);
}

Each li has a checkbox inside them. I want it to function like this:

All the checkboxes inside the LIs are currently checked. When the checkbox inside of the li is unchecked, the li will have a specific background color (this background color will be the same for all LIs). After the checkbox has been checked again, the LI will animate to the background color it was before. I got this code, but I know it sucks. When I uncheck the checkbox, it works excellent, animates the background color to what I want, but I couldnt get it work when its checked again, so I made it after the animation is complete, the style attribute to be removed. And, I got this result:

When I click the input, the li animates its background color to what I want, but when I click again, and the checkbox is checked again, it goes back to its normal color, but very fast. This also has a lot of bugs, in defining if the checkbox is checked or not. This is my current code:

    var state = true;
    $( "li input:checked" ).click(function() {
      if ( state ) {
        $(this).parent().parent().animate({
          backgroundColor: "#ECE7D2",
          color: "#fff"
        }, 1000 );
      } else {
        $(this).parent().parent().animate({
        }, 1000, "swing", function() {
            $(this).removeAttr("style");
        } );
      };

      state = !state;
    });

In a few words: A list with 5 items, with specified background colors. Jquery UI loaded. When a checkbox inside them is clicked (unchecked), change item's bg color to some color. When clicked again (checked), change to normal color it was before, or basically, cancel the animate background color which we did first. I hope I was clear.

Thanks.

UPDATE:

http://jsfiddle.net/S9FVu/

Answer 1

You could store the original background color using jQuery .data() and then animate between the original color and the new color.

Working Example

$('input[type="checkbox"]').click(function () {
    if ($(this).is(':checked')) {
        $(this).parents('li').animate({
            backgroundColor: $(this).parents('li').data('backgroundColor'),
            color: "#fff"
        }, 1000);
    } else {
        $(this).parents('li').data('backgroundColor', $(this).parents('li').css('backgroundColor'));
        $(this).parents('li').animate({
            backgroundColor: "#ECE7D2",
            color: "#fff"
        }, 1000);
    }
});

Answer 2

DEMO

$('.fusheveprimet li').each(function () {
    $(this).attr('data-state', 'true');
});
$("li input:checked").click(function () {
    var par_li = $(this).parents('li');
    var state = par_li.attr('data-state');
    if (state == 'true') {
        par_li.stop(true, true).animate({
            backgroundColor: "#ECE7D2",
            color: "#fff"
        }, 1000);
        par_li.attr('data-state', 'false');
    } else {
        par_li.stop(true, true).animate({}, 1000, "swing", function () {
            $(this).removeAttr("style");
        });
        par_li.attr('data-state', 'true');
    };
});

added attribute to each li data-state = true.

changed value of current unchecked parent li data-state = false

error in your code

state once is set true and then changed to false for all.

Answer 3

You can use CSS transitions, which will allow you to select individual colors for each of them. Just add a class when the input has been checked or not:

$('input[type="checkbox"]').click(function(){  
    if($(this).is(':checked')){
      $(this).parents('li').removeClass('unchecked');
    } else {
      $(this).parents('li').addClass('unchecked');  
    }
});

Then Add transitions and the colors you need:

.fusheveprimet > li {
    -webkit-transition: background-color 1000ms linear;
     -moz-transition: background-color 1000ms linear;
     -o-transition: background-color 1000ms linear;
     -ms-transition: background-color 1000ms linear;
     transition: background-color 1000ms linear;
}

.fusheveprimet > li:nth-child(1) {
    background-color: rgb(15, 94, 136);
}
.fusheveprimet > li:nth-child(1).unchecked {
    background-color: #ECE7D2;
}

Here is the Fiddle.