jQuery点击动画背景颜色答案

【问题标题】：jQuery animate background colors on clickjQuery点击动画背景颜色
【发布时间】：2013-08-14 14:40:49
【问题描述】：

我正在使用 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/

【问题讨论】：

查看我的答案演示jsfiddle.net/cse_tushar/S9FVu/2

标签： jquery html css jquery-ui

【解决方案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。

【讨论】：

【解决方案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');
    };
});

将attribute添加到每个li data-state = true。

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

代码错误

state 一次设置为true，然后全部更改为false。

【讨论】：

【解决方案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);
    }
});

【讨论】：