点击时jQuery动画背景颜色

Question

我正在使用 jQuery UI 来设置背景颜色的动画。我有一个包含 5 个带有背景颜色的元素的列表。每个 li 都有不同的背景颜色，在 css 中指定如下:

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

每个里都有一个复选框。我希望它像这样工作:

LI 内的所有复选框当前都处于选中状态。当 li 内的复选框未选中时，li 将具有特定的背景颜色(此背景颜色对于所有 LI 都是相同的)。再次选中该复选框后，LI 将动画显示为之前的背景颜色。我得到了这段代码，但我知道它很糟糕。当我取消选中该复选框时，它工作得很好，将背景颜色设置为我想要的动画，但是当它再次选中时我无法让它工作，所以我在动画完成后做了它，样式属性被删除。而且，我得到了这个结果:

当我单击输入时，li 将其背景颜色设置为我想要的动画，但是当我再次单击并再次选中该复选框时，它会恢复到正常颜色，但速度非常快。这也有很多错误，在定义复选框是否被选中时。这是我当前的代码:

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

简而言之:一个包含 5 个元素的列表，具有指定的背景颜色。已加载 Jquery UI。单击(未选中)其中的复选框时，将元素的 bg 颜色更改为某种颜色。再次单击(选中)时，更改为之前的正常颜色，或者基本上取消我们首先执行的动画背景颜色。我希望我说清楚了。

谢谢。

更新:

http://jsfiddle.net/S9FVu/

Answer 1

您可以使用 CSS transitions，这将允许您为每种颜色选择单独的颜色。只需在检查或不检查输入时添加一个类:

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

然后添加您需要的过渡和颜色:

.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;
}

这是 Fiddle .