JQuery JQuery第三方插件(jquery.color.js)，动画，改变背景色的动画

最新推荐文章于 2025-06-26 09:01:52 发布

houyanhua1

最新推荐文章于 2025-06-26 09:01:52 发布

阅读量6.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery 文章标签： jquery 动画

本文链接：https://blog.youkuaiyun.com/houyanhua1/article/details/79616798

JQuery 专栏收录该内容

57 篇文章

订阅专栏

本文介绍了一个简单的HTML页面示例，通过结合使用jQuery和jQuery颜色插件来实现元素宽度变化的同时平滑过渡到红色背景。文章展示了如何通过点击按钮触发动画效果，并在动画完成后弹出提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo.html：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: black;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>  <!--JQuery 动画不支持背景色的变化-->
    <script src="jquery.color.js"></script>  <!--JQuery第三方插件，支持改变背景色的动画插件。要先引入JQuery再引入插件-->
    <script>
        $(function () {
            //获取按钮，改变盒子的背景色；
            $("button").on("click", function () {
                $("div").animate({"width":200,"background-color":"red"},2000, function () {
                    alert("动画结束");
                });
            });
        })
    </script>
</head>
<body>
<button>变色</button>
<div></div>
</body>
</html>