Question

我正在使用jQuery UI动画背景颜色。我有一个包含背景颜色的5个项目列表。每个li都有不同的背景颜色，用css指定：

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

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

目前检查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已加载。单击其中的复选框（未选中）时，将项目的颜色更改为某种颜色。再次单击（选中）时，更改为之前的正常颜色，或者基本上取消我们先做的动画背景颜色。我希望我很清楚。

感谢。

更新：

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。

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

为每个li attribute = data-state添加了true。

更改当前未经检查的父级li data-state = false

的值代码中的

错误

state设置为true，然后更改为false。

Answer 3

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

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

jQuery点击动画背景颜色

3 个答案: