jQuery jquery.color.js 背景颜色支持动画

最新推荐文章于 2024-03-25 09:33:09 发布

卡尔特斯

最新推荐文章于 2024-03-25 09:33:09 发布

阅读量996

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/zz00008888/article/details/109327179

版权

jQuery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本身jQuery是不支持背景颜色等属性支持动画的，该插件可以让背景颜色等属性支持动画
jquery-color GitHub
未使用插件的代码以及效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: black;
    }
  </style>
  <script src="jquery-3.4.1.js"></script>
  <script>
    $(function () {
      $('button').on('click', function () {
        $('div').animate({'background-color': 'red', 'width': 200}, 2000, function () {
          alert('动画结束');
        });
      })
    })
  </script>
</head>
<body>
  <button>变色</button>
  <div></div>
</body>
</html>

未使用插件的效果：

使用了插件的代码与效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: black;
    }
  </style>
  <script src="jquery-3.4.1.js"></script>
  <!-- 只需要导入即可支持，无需任何改动 -->
  <script src="jquery.color.js"></script>
  <script>
    $(function () {
      $('button').on('click', function () {
        $('div').animate({'background-color': 'red', 'width': 200}, 2000, function () {
          alert('动画结束');
        });
      })
    })
  </script>
</head>
<body>
  <button>变色</button>
  <div></div>
</body>
</html>