jQuery的animate()方法做一个颜色的渐变

需求：在1秒内，由一个颜色变到另一个颜色，不是1秒后再变色。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>背景渐变</title>

    <style>

        div {

            width: 200px;

            height: 200px;

            background-color: red;

            color: white;

            font-size: 50px;

            font-weight: 500;

        }

        p {

            width: 20px;

            height: 20px;

            background-color: deepskyblue;

        }

    </style>

</head>

<body>

    <p></p>

    <div>123</div>

</body>

<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

<!-- 变态：要想使用颜色渐变，必须要用这个插件！ -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js"></script>

<script>

    $(function () {

        $("p").click(() => {

            $("div").animate({

                width: 100,

                height: 100,

                backgroundColor: "blue",

            },1000);

        })

    });

</script>

</html>

巴特西

jQuery的animate()方法做一个颜色的渐变

最新文章

热门文章