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

简介： jQuery animate()函数对一组 CSS 属性执行自定义动画。

句法：

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

参数：

• properties (*required)：这些定义了 CSS 属性和值的对象以进行动画处理。只有高度、宽度、左侧等数值可以动画，而非数字的属性不能动画，例如背景颜色。除了数值之外，每个属性都可以采用字符串“show”、“hide”和“toggle”。
• 持续时间（可选）：它给出动画将运行多长时间的数字或持续时间。这以毫秒为单位。如果未指定，则默认值为 400 毫秒。字符串“fast”表示 200 毫秒的值，而字符串“slow”表示 600 毫秒的值。
• easing（可选）：它指定动画在动画中不同点的进展速度。默认值为字符串'swing'。 “线性”值将以恒定的速度运行动画。
• complete(optional) ：动画完成后调用的回调函数。

示例 1：在此示例中，我们通过增加圆的高度和宽度来为圆设置动画。我们还使用了一个回调函数，该函数在动画完成后发出一条消息。

HTML

  

    
    
      
    
        #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;
        }
    
      
    
        $(document).ready(function () {
            $("#btn").click(function () {
                $("#circle").animate({
                    height: "400px",
                    width: "400px"
                }, 3000, animationcomplete);
            });
  
            function animationcomplete() {
                alert("animation is completed");
            }
        });
    

  

    Animate
    

  

输出：

示例 2：在此示例中，我们正在为一个不停止上下跳跃的徽标图像设置动画。我们重复调用该函数以使动画不停止，如下面的代码所示。

HTML

  

    
    
  
    
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            background: brown;
        }
  
        img {
            position: absolute;
            border-radius: 50%;
        }
    
  
    
        $(document).ready(function () {
            function Bounce() {
                $("#myimg").animate({
                    top: "100px",
                    width: "200px"
                }, 1000, function () {
                    $("#myimg").animate({
                        top: "300px",
                        width: "250px"
                    }, 1000, Bounce)
                });
            }
            Bounce();
        })
    

  

    

  

输出：