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

简介: jQuery jquery.color.js 背景颜色支持动画
+关注继续查看

  • 本身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>
  • 未使用插件的效果:

image


  • 使用了插件的代码与效果:
<!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>
  • 使用了插件的效果:

image


相关文章
|
3月前
|
JavaScript
jQuery 显示隐藏动画 show(); hide(); toggle();
jQuery 显示隐藏动画 show(); hide(); toggle();
27 0
|
3月前
|
JavaScript
jQuery 滑入滑出动画 slideDown(); slideUp(); slideToggle();
jQuery 滑入滑出动画 slideDown(); slideUp(); slideToggle();
30 0
|
3月前
|
JavaScript
jQuery 淡入淡出动画 fadeIn(); fadeOut(); fadeToggle(); fadeTo();
jQuery 淡入淡出动画 fadeIn(); fadeOut(); fadeToggle(); fadeTo();
27 0
jQuery 淡入淡出动画 fadeIn(); fadeOut(); fadeToggle(); fadeTo();
|
3月前
|
JavaScript
jQuery stop() 停止动画(详细使用)
jQuery stop() 停止动画(详细使用)
24 0
|
3月前
|
JavaScript
jQuery fullpage.js 全屏分页以及动画使用
jQuery fullpage.js 全屏分页以及动画使用
26 0
|
3月前
|
JavaScript
jQuery fullpage.js 全屏分页以及动画使用
jQuery fullpage.js 全屏分页以及动画使用
17 0
|
3月前
|
JavaScript
jQuery 下拉菜单 添加动画
jQuery 下拉菜单 添加动画
41 0
|
3月前
|
JavaScript 前端开发 Java
JQuery的使用(工具方法、CSS属性及方法、筛选、文档处理、事件、动画)后续
元素 . animate({属性:属性值 } , time);缩放:width height移动:top left移动本元素,距离:top = "+=" left = "-="上一章:JQuery(入门~选择器)
|
3月前
|
JavaScript
jQuery事件&动画2
jQuery事件&动画2
17 0
|
3月前
|
JavaScript
jQuery事件&动画1
jQuery事件&动画1
25 0
相关产品
云迁移中心
推荐文章
更多