How to remove css class with some effect using jQuery?

Question

I have HTML table. This is one of the rows:

<tr class="mattersRow">

    <td colspan="4"> … </td>
    <td class="editableCell qbmatter" colspan="14"> … </td>
    <td class="editableCell workDate" colspan="4"> … </td>
    <td class="editableCell hours" colspan="2"> … </td>
    <td class="editableCell person" colspan="6"> … </td>
    <td class="rate" colspan="2"> … </td>
    <td class="editableCell amount" colspan="4"> … </td>
    <td align="center">
        <input id="check4" type="checkbox"></input>
    </td>

</tr>

Last column contains check box. When I check/uncheck it I want to add/remove css class for this row.

$("input[type=checkbox]").click(function () {    
            if ($(this).is(':checked')) {
                // Mark this Row Yellow
                $(this).closest('tr').addClass('warning');                        
            }
            else {
                // Remove Yellow mark and put back danger if needs
                $(this).closest('tr').removeClass('warning');
            }
        });

This class makes whole row Yellow color. Basically I want to do this with some effect. For example when I uncheck, this "Yellow" is falling down... How to do this in jQuery? Is it possible?

Can you provide the sample of the code? I'm not familiar with transition... — Bryuk
– Bryuk, Commented Dec 12, 2013 at 22:15

Jasper · Accepted Answer · 2013-12-12 22:15:02Z

2

You can do this with CSS but it will only function in modern browsers that support CSS transitions:

tr {
    -webkit-transition : background-color 500ms ease-in-out;
    -moz-transition : background-color 500ms ease-in-out;
    -ms-transition : background-color 500ms ease-in-out;
    -o-transition : background-color 500ms ease-in-out;
    transition : background-color 500ms ease-in-out;
}

Here is a demo: http://jsfiddle.net/eh3ER/1/

Note: This is only to fade in/out the color, doing something like a "push" or "pull" animation will require multiple elements (I believe).

Also, here is a great resource for browser support on many features: http://caniuse.com/#feat=css-transitions (this link will take you directly to CSS transitions)

answered Dec 12, 2013 at 22:15

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bryuk Over a year ago

Thanks! It's interesting=) Will spend some time reading transitions=)

Jasper Over a year ago

@Bryuk Take a look at MDN docs if you don't already, they're great: developer.mozilla.org/en-US/docs/Web/CSS/transition

douweegbertje · Accepted Answer · 2013-12-12 22:08:15Z

-1

 $(this).closest('tr').animate( { backgroundColor: 'red'}, '2000');

see more here: http://api.jquery.com/animate/

answered Dec 12, 2013 at 22:08

douweegbertje

867 bronze badges

3 Comments

Bryuk Over a year ago

No, I need to remove this class, not just change background

Jasper Over a year ago

Colors cannot be animated without a plugin in jQuery:

For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used

, source: api.jquery.com/animate

douweegbertje Over a year ago

Then animate the stuff you have in that class like I did. If you read my link you will see you can add everything. Change width's etc. Visa versa for the remove bit.

Collectives™ on Stack Overflow

How to remove css class with some effect using jQuery?

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related