解释jQuery中的.animate()函数的用途

介绍一下。jQuery animate()函数在一组CSS属性上执行自定义动画。

语法:

(selector).animate(properties [,duration][,easing][,complete])

参数:

properties（必须的）。这些定义了要动画化的CSS属性和值的对象。只有数字值，如高度、宽度、左边等可以被动画化，而非数字的属性则不能被动画化，如背景颜色。除了数值之外，每个属性都可以采用 “显示”、”隐藏 “和 “切换 “等字符串。
duration（可选）。它给出了动画将运行多长时间的数字或持续时间。这是以毫秒为单位的。如果没有指定，默认值是400毫秒。字符串 “fast “表示200毫秒，字符串 “slow “表示600毫秒。
easing（可选）。它指定了动画在不同点上的进展速度。默认值是字符串’swing’。线性 “的值将以恒定的速度运行动画。
complete(可选):一个回调函数，一旦动画完成就会被调用。

例子1：在这个例子中，我们通过增加圆的高度和宽度来制作圆的动画。我们还使用了一个回调函数，一旦动画完成就会发出警报。

<!DOCTYPE html>
<html>
  
<head>
    <script type="text/javascript" 
src="https://code.jquery.com/jquery-1.12.0.min.js">
    </script>
      
    <style>
        #circle {
            height: 150px;
            width: 150px;
            margin-top: 30px;
            padding: 10px;
            background-color: #00b3b3;
            border-radius: 50%;
            display: inline-block;
            position: absolute;
        }
  
        #btn {
            padding: 20px;
            font-size: 14px;
        }
    </style>
      
    <script>
        (document).ready(function () {
            ("#btn").click(function () {
                $("#circle").animate({
                    height: "400px",
                    width: "400px"
                }, 3000, animationcomplete);
            });
  
            function animationcomplete() {
                alert("animation is completed");
            }
        });
    </script>
</head>
  
<body>
    <button id="btn">Animate</button>
    <div id="circle"></div>
</body>
  
</html>

输出:

解释jQuery中的.animate()函数的用途

例子2：在这个例子中，我们正在制作一个标志图像的动画，该图像上下跳动而不停止。我们反复调用函数，使动画不停止，如下面的代码所示。

<!DOCTYPE html>
<html>
  
<head>
    <script type="text/javascript" 
src="https://code.jquery.com/jquery-1.12.0.min.js">
    </script>
  
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            background: brown;
        }
  
        img {
            position: absolute;
            border-radius: 50%;
        }
    </style>
  
    <script>
        (document).ready(function () {
            function Bounce() {
                ("#myimg").animate({
                    top: "100px",
                    width: "200px"
                }, 1000, function () {
                    $("#myimg").animate({
                        top: "300px",
                        width: "250px"
                    }, 1000, Bounce)
                });
            }
            Bounce();
        })
    </script>
</head>
  
<body>
    <img id="myimg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210824161630/logo.png"
        width="200px" height="200px" />
</body>
  
</html>