jQuery | animate（）中的示例-yiteyi-C++库

这个 制作动画 是jQuery中的一个内置方法，用于 使用CSS样式更改元素的状态 。此方法还可用于更改CSS属性，为选定元素创建动画效果。

null

语法：

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

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

风格： 它有助于设置新的css属性。
第1段： 它是可选参数，用于设置参数的速度，默认值为400毫秒。
para2： 它是可选的，用于指定元素在不同位置的速度。
para3： 这是可选功能，用于在动画完成后执行。

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

显示animate（）方法工作的jQuery代码： 代码#1：

                     <                               html                               >                   
                             
                     <                               head                               >                   
                                         <                               script                               src="                       https://ajax.googleapis.com/ajax/libs/                              
                                         jquery/3.3.1/jquery.min.js"></                               script                               >                   
                                         <                               script                               >                   
                                         <!-- jQuery code to show animate() method -->                   
                                         $(document).ready(function() {                   
                                         $("#b1").click(function() {                   
                                         $("#box").animate({                   
                                         width: "300px"                   
                                         });                   
                                         $("#box").animate({                   
                                         height: "300px"                   
                                         });                   
                                         });                   
                                         });                   
                                         </                               script                               >                   
                                         <                               style                               >                   
                                         div {                   
                                         width: 100px;                   
                                         height: 100px;                   
                                         background-color: green;                   
                                         }                   
                             
                                         #b1 {                   
                                         margin-top: 10px;                   
                                         }                   
                                         </                               style                               >                   
                     </                               head                               >                   
                             
                     <                               body                               >                   
                                         <                               div                               id                               =                               "box"                               ></                               div                               >                   
                                         <!-- click on this button -->                   
                                         <                               button                               id                               =                               "b1"                               >Click Here !</                               button                               >                   
                     </                               body                               >                   
                             
                     </                               html                               >                   

输出： 点击“点击这里！”钮扣- 图片[1]-jQuery | animate（）中的示例-yiteyi-C++库

点击“点击这里！”钮扣- 图片[2]-jQuery | animate（）中的示例-yiteyi-C++库

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

                     <                               html                               >                   
                             
                     <                               head                               >                   
                                         <                               script                               src                               =                               "                       https://code.jquery.com/jquery-1.10.2.js                      "                               >                   
                                         </                               script                               >                   
                                         <                               style                               >                   
                                         div {                   
                                         background-color: green;                   
                                         height: 100px;                   
                                         width: 100px;                   
                                         margin-top: 10px;                   
                                         }                   
                             
                                         #b1 {                   
                                         margin-top: 10px;                   
                                         }                   
                                         </                               style                               >                   
                     </                               head                               >                   
                             
                     <                               body                               >                   
                                         <                               div                               id                               =                               "box"                               ></                               div                               >                   
                                         <!-- click here and animation will start -->                   
                                         <                               button                               id                               =                               "b1"                               >Click Here !</                               button                               >                   
                                         <!-- jQuery code to show the animate method -->                   
                                         <                               script                               >                   
                                         $(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                               >");                   
                                         }                   
                                         });                   
                                         });                   
                                         });                   
                                         </                               script                               >                   
                     </                               body                               >                   
                             
                     </                               html                               >                   