How to remove css class with some effect using jQuery?


Tags: javascript,jquery,html,css

Problem :

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?



Solution :

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)


    CSS Howto..

    How can I delay the speed of hover purely via CSS3 for a div?

    Show/Hide elements in a table

    How can i find and change css style in ruby?

    Element width based on how many siblings are present

    How to stop FOUC when using css loaded by webpack

    How to hide a div with jquery or alternative?

    How to add to css class in a single html tag? [duplicate]

    How to set the css property of dynamic data

    How to fix the alignment of my sub-menu

    How to Make Text Stay Inside Div?

    Twitter widget covers up another div that might appear over it . How to make twitter widget appear under?

    How to make this table's height equal to the middle td's height

    how is Zurb's Foundation Menu button coded?

    How can I align a div at the edge of a div above it when said div is using automatic positioning?

    How to move a CSS class below another? [closed]

    How do I align my radio button with associated text?

    How do I split a WordPress theme into 2 columns?

    How to select li child of a ul without nth-child via css?

    CSS - HTML - How to align images properly across the page

    How to create a CSS3 animation that resembles an image fill up effect?

    iOS How to access Library in CSS Url's?

    How to find a div / panel in repeater and apply css?

    How to CENTER a Vertical Menu for ALL Screen Resolutions?

    How to make a Floating Nav bar? [closed]

    How to center a text line in a navigation bar?

    How do I completely remove all references to application.js and application.css in a Rails app?

    How to implement padding-free sprites in css?

    How to set background image to keep its position while browser width is changing?

    Css positioning: how to position a block/paragraph under another

    How to implement vertical tables using html5/CSS