CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Bryuk
Bryuk

Reputation: 3345

How to remove css class with some effect using jQuery?

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?

Upvotes: 0

Views: 284

Answers (2)

Jasper
Jasper

Reputation: 76003

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)

Upvotes: 2

douweegbertje
douweegbertje

Reputation: 86

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

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

Upvotes: -1

Related Questions