JQuery removeClass with css animation not working

Question

I have the 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 animation (without Javascript / Jquery, if possible). But it just removes the class without animation.

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

Any ideas?

Answer 1

Transition rules must be defined in 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>