3

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

4

3 回答 3

2

您可以使用 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;
}

这是小提琴。

于 2013-08-14T15:34:49.370 回答
0

演示

$('.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为全部。

于 2013-08-14T15:36:13.403 回答
0

您可以使用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);
    }
});
于 2013-08-15T16:15:12.740 回答