Question

I may be going about this the wrong way so if it’s bad practice please say so.

I have DIVs that contains a checkbox and label. The DIVs are styled to look like a button and I have written code so that if a user clicks (or taps) the DIV the value or state of the checkbox will toggle between checked and unchecked (this isn’t included in the code below).

Here’s what the DIV HTML looks like…

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

Now when the user clicks or taps the DIV I also wish to change the appearance of the container DIV (the one with the .funkyCheckBox class) so it is visually obvious to the user that the checkbox state has changed. I use jQuery toggle to add an active state to the DIV (the class funkyCheckBoxActive is added or removed to the DIV).

Here is the 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;
    }

here is my edited jQuery code…

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

});

When the user clicks one of the .funkyCheckBox Divs the new class is added with a nice CSS transition. When I click again the .funkyCheckBoxActive class is removed but I’d like there to be a similar transition when the class is removed rather than just an instant removal. What is the best way to go about this. I thought about adding a similar transition to the .funkyCheckBox class but I know this won’t work or give the desired effect. Any ideas, anyone?

If I haven’t explained my issue well please say so and I shall reword.

Answer 1

you have used CSS3 transitions for your active class but the original funkyCheckBox has simple background gradients. Use css transitions in the funkyCheckBox class instead of background gradient for similar effect.