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

时间：12-20来源：作者：点击数：

本身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>

使用了插件的效果：

方便获取更多学习、工作、生活信息请关注本站微信公众号 城东书院微信服务号

来顶一下

返回首页

上一篇:javascript中的function与class用法下一篇:javascript学习10：CSSStyleDeclaration对象

高考生入学注意：这些大	【健康】纯净水、天然
14种竞赛生升学路径盘	excel后缀xls和xlsx有