2025年4月18日 星期五 乙巳(蛇)年 正月十九 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

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

时间:12-20来源:作者:点击数:26
  • 本身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>
  • 使用了插件的效果:
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门