Jquery removeClass with css animation not working

Question

I have following css rule for table row background,

tr.unread {
    background:rgba(237, 239, 245, 0.70) none repeat scroll 0 0;
   -webkit-transition: background 1s linear;
   -moz-transition: background 1s linear;
   -o-transition: background 1s linear;
   transition: background 1s linear;
 }

I want to remove the .unread class from tr with fading out animation (without Javascript / Jquery if possible). But it just removes the class without any animation.

Javascript: $('tr.unread').removeClass('unread');

Any Ideas ?

absolutely no need for JQueryUI for this, add and remove class is all you should be doing with the js — Toni Leigh
– Toni Leigh, Commented Jul 4, 2015 at 11:49

dfsq · Accepted Answer · 2015-07-04 10:14:54Z

4

Transition rules must be defined on the tr element:

$('button').click(function() {
  $('tr.unread').removeClass('unread');
});

tr {
    -webkit-transition: background 1s linear;
    -moz-transition: background 1s linear;
    -o-transition: background 1s linear;
    transition: background 1s linear;
}
tr.unread {
    background: rgba(237, 239, 245, 0.70) none repeat scroll 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr class="unread">
        <td>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
        </td>
    </tr>
    <tr class="unread">
        <td>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
        </td>
    </tr>
</table>

<button>Mark read</button>

answered Jul 4, 2015 at 10:14

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

5 Comments

Bhavesh G Over a year ago

Cool. But any other solutions except adding animation property in tr element. Because I have many other tables in other pages and I don't want to affect them.

vanntile Over a year ago

You should use another class. Just make something like animated.unread instead of tr.unread and put animation to animated.

Bhavesh G Over a year ago

I mean is there any way except altering original tr rule ?

dfsq Over a year ago

You can limit this behavior for one table with some class. Like <table class="messages"> and in CSS: .messages tr {-webkit-transition: ...}

Toni Leigh Over a year ago

you can just add a class message then add and remove the unread class from that class, no need to mention HTML structure at all in the css or the jquery, then, when you apply it elsewhere or stop using tables it will still just work :-)

Collectives™ on Stack Overflow

Jquery removeClass with css animation not working

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related