个人中心
gpt4 book ai didi

jquery - jQuery removeClass 时希望背景色逐渐过渡

转载 作者：行者123 更新时间：2023-11-28 12:54:24 25 4
gpt4 key购买 nike

我正在使用 Google Chrome 版本 33.0.1750.154 m 和 jQuery 的最新版本，尝试在单击按钮时将背景颜色转换为输入和输出。过渡(淡入)进行得很好，背景颜色按预期逐渐淡入。然而，过渡(在单击取消选择时从浅蓝色到白色)是突然的，而不是我预期的逐渐淡出。

谁能告诉我 (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>

最佳答案

将您的 CSS 更改为以下内容

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

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

(1)为什么淡出突然 - 因为根据你的 CSS，'.selected' 将只有过渡(2) 我怎样才能使淡出渐变？ - 将过渡属性赋予 tr

关于jquery - jQuery removeClass 时希望背景色逐渐过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22879852/

25 4 0
文章推荐： javascript - 如何在 jquery 上只选择父级？
文章推荐： javascript - html DIV 不必要地通过浏览器操作调整大小
文章推荐： html - 使用 CSS 消除对象之间的间隙
文章推荐： javascript - mxGraph - 通过加载 XML 显示图表
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com