I found this code:

$('li input:checked').click(function() {
    $(this).parent().parent().toggleClass("uncheckedBoxBGColor", 1000);
});

It's working well, when a click the element for the first time. It fades the background color, but when I click it again, it delays for 1000 ms, and then flashes the other background color. I want it animated when it has the class, and when not, not only when clicked for the first time.

I found this code:

$('li input:checked').click(function() {
    $(this).parent().parent().toggleClass("uncheckedBoxBGColor", 1000);
});

It's working well, when a click the element for the first time. It fades the background color, but when I click it again, it delays for 1000 ms, and then flashes the other background color. I want it animated when it has the class, and when not, not only when clicked for the first time.

• javascript
• jquery
• html
• css

Share Follow edited Aug 29, 2013 at 10:55 Ozzy 8,32277 gold badges5757 silver badges9696 bronze badges asked Aug 14, 2013 at 15:08 Amar SylaAmar Syla 3,66333 gold badges3232 silver badges7171 bronze badges 2

• Please provide the css of the class you toggle. – benestar Commented Aug 14, 2013 at 15:12
• Just a background color, nothing else. – Amar Syla Commented Aug 14, 2013 at 15:28

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

This is easy with CSS transitions:

JS:

$('li input:checked').click(function() {
    $(this).parent().parent().toggleClass("uncheckedBoxBGColor", 1000);
});

CSS:

.uncheckedBoxBGColor {
  background-color: orange;
  /*other properties*/
  transition: background-color .3s;
}

This will add the effect whenever the class is turned ON, but when it doesn't have that class then there are no transitions defined. So instead, you can turn on this transition for ALL <LI> elements like so:

CSS:

li { transition: background-color .3s; }

OR for all <INPUT> elements following an <LI><INPUT> bination:

li input { transition: background-color .3s; }

You get the idea of it..

The jquery.toggleClass function isn't made for fading anyhow. See http://api.jquery./toggleClass/ for more details.

If you want to fade in/out the background color, try using the CSS3 transition feature like explained at Mozilla's side: https://developer.mozilla/en-US/docs/Web/Guide/CSS/Using_CSS_transitions.

Maybe because you are using "input:checked"

try using

     $('li input[type=checkbox]').click(function () {
            $(this).parent().parent().toggleClass("uncheckedBoxBGColor", 1000);
        });

this is working for me.