zoukankan      html  css  js  c++  java
  • 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 {
                 200px;
                height: 200px;
                background-color: red;
                color: white;
                font-size: 50px;
                font-weight: 500;
            }
    
            p {
                 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({
                     100,
                    height: 100,
                    backgroundColor: "blue",
                },1000);
            })
        });
    </script>
    </html>
  • 相关阅读:
    观察者模式
    模版方法
    event
    设计模式之观察者模式
    BOM
    javascript基础语法&4
    Document Object Model
    javascript基础语法&3
    javaScript基础语法&1
    sublimeText3安装
  • 原文地址:https://www.cnblogs.com/wuqilang/p/11907980.html
Copyright © 2011-2022 走看看