Question

我正在使用谷歌Chrome版本33.0.1750.154米和jQuery的最新版本，尝试转换背景颜色＆amp;按下按钮点击。（淡入）的过渡很好，背景颜色逐渐消失，如预期的那样。然而，转换出来（点击取消选择时从LightBlue到White）是突然的，而不是我预期的逐渐淡出。

有谁能请告诉我（1）为什么淡出是突然的，以及（2）我如何能逐渐淡出？

感谢您的帮助。

<!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>

Answer 1

将CSS更改为以下

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

还要确保使用-webkit，-moz等以获得最佳兼容性

（1）为什么淡出是突然的 - 因为根据你的CSS，'。select'将只有转换（2）我怎样才能逐渐淡出淡出？ - 将过渡属性赋予tr

Answer 2

对于Bootstrap，我必须覆盖form-control类：

.form-control {
    transition: all 0.5s ease 0s !important;
}

想要在jQuery removeClass时逐渐过渡背景色

2 个答案: