jQuery | animate() 与示例

animate()是 jQuery 中的一个内置方法，用于更改具有 CSS 样式的元素的状态。此方法还可用于更改 CSS 属性以创建所选元素的动画效果。

句法：

(selector).animate({styles}, para1, para2, para3);

这里的“选择器”是被选择的元素。
参数：它接受下面指定的四个参数-

• 样式：它有助于设置新的 css 属性。
• para1：可选参数，用于设置参数的速度，默认值为400毫秒。
• para2：它是可选的，它指定元素在不同位置的速度。
• para3：可选函数，用于在动画完成后执行。

返回值：它返回使用上述方法所做的更改。

显示 animate() 方法工作的 jQuery 代码：
代码#1：

  

    
    
        <!-- jQuery code to show animate() method -->
        $(document).ready(function() {
            $("#b1").click(function() {
                $("#box").animate({
                    width: "300px"
                });
                $("#box").animate({
                    height: "300px"
                });
            });
        });
    
    
        div {
            width: 100px;
            height: 100px;
            background-color: green;
        }
          
        #b1 {
            margin-top: 10px;
        }
    

  

    
    
    Click Here !

  

输出：
在点击“点击这里！”之前按钮-

点击“点击这里！”后按钮-

代码#2：
在下面的代码中，所有参数都传递给了这个方法。

  

    
    
    
        div {
            background-color: green;
            height: 100px;
            width: 100px;
            margin-top: 10px;
        }
          
        #b1 {
            margin-top: 10px;
        }
    

  

    
    
    Click Here !
    
    
        $(document).ready(function() {
            $("#b1").click(function() {
                $("#box").animate({
                    height: "200px",
                    width: "200px"
                }, {
                    duration: 1000,
                    easing: "linear",
                    complete: function() {
$(this).after("<p>Reaches to maximum height and width !</p>");
                    }
                });
            });
        });
    

  

输出：
在单击“单击此处”按钮之前-

点击“点击这里”按钮后——