- 本身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>
- 使用了插件的效果：
