Question

我可能会以错误的方式解决这个问题，所以如果这是不好的做法，请说出来。

我有包含复选框和标签的DIV。 DIV的样式看起来像一个按钮，我编写了代码，这样如果用户点击（或点击）DIV，复选框的值或状态将在已选中和未选中之间切换（这不包括在下面的代码中）

以下是DIV HTML的样子......

<div class="funkyCheckBox">
<label for="inputName">Label Text</label>
<input type="checkbox"  name="inputName" id="inputID" />
</div>

现在，当用户点击或点击DIV时，我也希望更改容器DIV（具有.funkyCheckBox类的容器）的外观，因此对于用户而言，对于复选框状态已更改，在视觉上是显而易见的。我使用jQuery切换来为DIV添加一个活动状态（类funkyCheckBoxActive被添加或删除到DIV）。

这是CSS ...

.funkyCheckBox{
    display:block;
    border-radius: 1em 1em 1em 1em;
    margin-bottom:.5em;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #eaeaea 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eaeaea)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#eaeaea 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#eaeaea 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#eaeaea 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffffff 0%,#eaeaea 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */
    padding:.5em;
    }

    .funkyCheckBoxActive{
    background: blue; 
    -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;
    }

这是我编辑的jQuery代码......

$(".funkyCheckBox").live("click, tap", function(){
    $(this).toggleClass("funkyCheckBoxActive");

});

当用户点击其中一个.funkyCheckBox Div时，新类会添加一个很好的CSS转换。当我再次单击时，.funkyCheckBoxActive类被删除但我希望在删除该类时进行类似的转换，而不是仅仅立即删除。什么是最好的方法来解决这个问题。我考虑过向.funkyCheckBox类添加类似的过渡，但我知道这不会起作用或产生预期的效果。任何想法，任何人？

如果我没有很好地解释我的问题，请说出来，我会改写。

Answer 1

您已经为活动类使用了CSS3过渡，但原始的funkyCheckBox具有简单的背景渐变。使用funkyCheckBox类中的css过渡而不是背景渐变来获得类似的效果。

切换CSS过渡

1 个答案: