Perhaps my approach is not ideal, so please feel free to provide feedback if this is not considered best practice.
I have created DIVs that contain a checkbox and label. These styled DIVs resemble buttons, and I have implemented code to allow users to toggle the checkbox value or state by clicking (or tapping) on the DIV (this functionality is not shown in the code below).
Below is an example of what the HTML for the DIV looks like:
<div class="funkyCheckBox">
<label for="inputName">Label Text</label>
<input type="checkbox" name="inputName" id="inputID" />
</div>
Additionally, when a user clicks or taps on the DIV, I would like to change the appearance of the container DIV with the .funkyCheckBox class to visually indicate to the user that the checkbox state has changed. I utilize jQuery toggle to apply an active state to the DIV (adding or removing the class funkyCheckBoxActive).
Here is the CSS code:
.funkyCheckBox{
display:block;
border-radius: 1em 1em 1em 1em;
margin-bottom:.5em;
background: #ffffff; /* Old browsers */
/* Add more gradient styles here */
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;
}
Below is my updated jQuery code:
$(".funkyCheckBox").live("click, tap", function(){
$(this).toggleClass("funkyCheckBoxActive");
});
When a user clicks one of the .funkyCheckBox Divs, the new class is added with a smooth CSS transition. However, upon clicking again, the .funkyCheckBoxActive class is removed instantly. I am seeking a way to implement a similar transition effect when the class is removed, rather than it being an instant removal. Any suggestions on the best approach? I had considered adding a transition to the .funkyCheckBox class, but I understand this may not achieve the desired effect. Your thoughts?
If my explanation is unclear, please let me know, and I will try to clarify further.