javascript - div 复选框在单击时变暗

Question

我在本网站的另一篇文章中找到了这段代码，是什么让你可以点击 div 中的任何地方，它会为你勾选复选框。

下面是我找到的代码，但是我已经通过给它一个 id

来改变它

<label for="cb">
     <div id="clickablediv">
         <input name="cb" id="cb" type="checkbox">
     </div>
</label>

Link to original question.

我想通过向它添加一些 java 脚本来扩展这个问题/答案，这样当单击 div 时它会淡出 div 一点，这样您就可以知道它已被单击，如果再次单击它，它就会消失到它原来的样子。我在想也许可以添加一种带有透明度的灰色，这样您在单击它后仍然可以看到下面的 div。

这是一个jsFiddle link使用 HTML 和一些 CSS 为 div 提供一些内容，这些内容将在点击时变暗。

我目前在我的网站上使用 jquery 1.11.0，所以如果使用 jquery，请确保它适用于 1.11.0

Answer 1

这是带动画的不透明度淡化:FIDDLE

$('#clickablediv').click(function () {
    if ($(this).find('#cb').is(':checked')) {
        $(this).animate({
            opacity: 0.5
        }, 250);
    } else {
        $(this).animate({
            opacity: 1
        }, 250);
    }
});