点击时使用jQuery动画更改背景颜色

Question

我正在使用jQuery UI来动画化背景颜色。我有一个包含5个项目的列表，每个li元素都有不同的背景颜色，这些颜色在css中指定，例如：

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

每个li里面都有一个复选框。我希望它的功能是这样的：

所有LI中的复选框当前都被勾选。当li内部的复选框未被勾选时，li将具有特定的背景颜色（此背景颜色将对所有LI相同）。复选框再次被勾选后，LI将动画显示到之前的背景颜色。我得到了这个代码，但我知道它很糟糕。当我取消复选框时，它运行得很好，将背景颜色动画显示为我想要的颜色，但是当我无法让它在复选框再次被勾选时正常工作，所以我让它在动画完成后，删除style属性。结果如下：

当我点击输入时，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。当其中一个复选框被点击（未选中），改变该项的背景颜色为某种颜色。当再次点击（选中）时，将其更改为之前的正常颜色，或者基本上取消我们先前所做的动画背景颜色。希望我表达清楚。

谢谢。

更新：

http://jsfiddle.net/S9FVu/

- Amar Syla

---

检查我的答案演示 http://jsfiddle.net/cse_tushar/S9FVu/2/ - Tushar Gupta - curioustushar

Answer 1

您可以使用CSS 转换，这将允许您为每个元素选择单独的颜色。只需在输入框被选中或未选中时添加一个类：

$('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链接。

- Lost Left Stack

Answer 2

演示

$('.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');
    };
});

为每个li添加了属性data-state=true

更改了当前未选中父级li的data-state值为false

您的代码存在错误

state一旦被设置为true，则对所有状态进行更改为false

- Tushar Gupta - curioustushar

Answer 3

您可以使用jQuery .data()存储原始背景颜色，然后在原始颜色和新颜色之间进行动画处理。

工作示例

$('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);
    }
});

- apaul