Want gradual transition of background color when jQuery removeClass

StackOverflow https://stackoverflow.com/questions/22879852

Question

I'm using Google Chrome Version 33.0.1750.154 m and jQuery's latest version, trying to transition background-color in & out upon button clicks. The transition in (fade in) goes just fine, with the background-color fading in gradually as expected. However, the transition out (from LightBlue to White upon clicking Deselect) is abrupt, rather than the gradual fade-out I had expected.

Could anyone please tell me (1) why the fade-out is abrupt, and (2) how I can make the fade-out gradual?

Thank you for your help.

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <title>Transition Test</title>
    <style>
      table, th, td  { border:1px solid black; }
      .selected      { background-color: LightBlue;
                       transition: background 2s ease-in-out; }
    </style>
    <script src='http://code.jquery.com/jquery-latest.js'></script>
    <script>
      $(document).ready ( function() {
        $('.selector').on ( 'click', function( event ) {
          event.preventDefault() ;
          $(this).closest('.containing').addClass('selected') ;
        } ) ;
        $('.deselector').on ( 'click', function( event ) {
          event.preventDefault() ;
          $(this).closest('.containing').removeClass('selected') ;
        } ) ;
      } ) ;
    </script>
  </head>
  <body>
          <table>
            <tr class='containing'>
              <td><button class='selector'>Select</button></td>
              <td><button class='deselector'>Deselect</button></td>
              <td>Washington</td>
              <td>George</td>
            </tr>
            <tr class='containing'>
              <td><button class='selector'>Select</button></td>
              <td><button class='deselector'>Deselect</button></td>
              <td>John</td>
              <td>Adams</td>
            </tr>
          </table>
  </body>
</html>
Was it helpful?

Solution

Change your CSS to following

table, th, td  { border:1px solid black;  }
  tr{ transition: background 2s ease-in-out; }
  .selected      { background-color: LightBlue; }

Also make sure you use -webkit, -moz, etc for best compatibility

(1) why the fade-out is abrupt - Because as per your CSS, '.selected' will have the transition only (2) how I can make the fade-out gradual? - give transition property to tr

OTHER TIPS

For Bootstrap I had to override the form-control class:

.form-control {
    transition: all 0.5s ease 0s !important;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top