0

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

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

这是 DIV HTML 的样子……</p> 

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

现在，当用户单击或点击 DIV 时，我还希望更改容器 DIV（具有.funkyCheckBox类的 DIV）的外观，以便用户在视觉上明显地看到复选框状态已更改。我使用 jQuery 切换向 DIV 添加活动状态（向 DIV 添加或删除类 funkyCheckBoxActive）。

这是 CSS……</p> 

.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 代码……</p> 

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

});

当用户单击其中.funkyCheckBox一个 Div 时，会添加一个带有漂亮 CSS 过渡的新类。当我再次单击该类时，.funkyCheckBoxActive该类被删除，但我希望在该类被删除时有类似的过渡，而不仅仅是立即删除。解决此问题的最佳方法是什么。我曾考虑在.funkyCheckBox课堂上添加类似的过渡，但我知道这不会起作用或产生预期的效果。任何想法，任何人？

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

4

1 回答 1

0

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

于 2012-10-19T09:44:48.370 回答