jQuery |动画、幻灯片方法和示例-yiteyi-C++库

jQuery 是一个非常强大的JavaScript框架。使用jQuery，我们可以向我们的网站或基于web的应用程序添加特殊效果。我们可以使用jQuery添加各种效果，比如隐藏/显示、淡入淡出效果、动画、回拨等等。用于隐藏/显示、切换、淡入淡出效果。 jQuery包含多个函数库，这些函数提供了向网页添加动画的技术。其中包括简单动画、标准动画。在本文中，我们将学习如何在网页中添加上述效果。

null

jQuery动画：

在jQuery中，我们可以使用animate（）方法生成各种类型的动画。这种方法可以在网页中生成简单到复杂的动画。使用动画，我们可以更改HTML元素的属性，例如背景颜色、更改边框样式、更改导航属性、格式化字体属性等。我们通过在方法的params参数中提供样式规则来对属性应用更改。 语法：

$("selector").animate({params}, speed, callback);

哪里

params参数指定在执行animate（）方法期间要更改的CSS属性。这是必需的参数。
速度参数指定应用效果的速度。它们只能接受这些值：“慢”、“快”或毫秒。
回调参数指定在执行animate（）方法后要执行的函数。

让我们看看它的JavaScript代码实现： 在这段代码中，我们为矩形设置动画，并将其形状更改为圆形。

                     <!DOCTYPE html>                   
                     <                               html                               >                   
                             
                     <                               head                               >                   
                                         <                               script                               src="                       https://ajax.googleapis.com/ajax/                              
                                         libs/jquery/3.3.1/jquery.min.js">                   
                     </                               script                               >                   
                                         <                               style                               type                               =                               "text/css"                               >                   
                                         div {                   
                                         width: 100px;                   
                                         height: 100px;                   
                                         background-color: green;                   
                                         }                   
                                         </                               style                               >                   
                     </                               head                               >                   
                             
                     <                               body                               >                   
                                         <                               div                               ></                               div                               >                   
                                         <                               br                               />                   
                                         <                               button                               id                               =                               "animate"                               >Animate Me</                               button                               >                   
                                         <                               script                               type                               =                               "text/javascript"                               >                   
                                         $("#animate").click(function() {                   
                                         $("div").animate({                   
                                         width: "200px",                   
                                         height: "200px",                   
                                         borderRadius: "50%",                   
                                         marginLeft: "210px",                   
                                         marginTop: "70px",                   
                                         },                   
                                         2000,                   
                                         );                   
                                         });                   
                                         </                               script                               >                   
                     </                               body                               >                   
                             
                     </                               html                               >                   

输出： 在 激励我 点击图片[1]-jQuery |动画、幻灯片方法和示例-yiteyi-C++库之后 激励我 点击图片[2]-jQuery |动画、幻灯片方法和示例-yiteyi-C++库

jQuery幻灯片：

向下滑动（）： 此方法使图元向下滑动。语法：

$(selector).slideDown(speed,callback);

例子： 在这个例子中，我们展示了向下滑动的效果。如果单击了“向下滑动”面板，则会对HTML元素进行相应的更改。 代码：

                         <!DOCTYPE html>                       
                         <                                     html                                     >                       
                         <                                     head                                     >                       
                         <                                     script                                     src="                           https://ajax.googleapis.com/                                    
                                                 ajax/libs/jquery/3.3.1/jquery.min.js"></                                     script                                     >                       
                         <                                     style                                     type                                     =                                     "text/css"                                     >                       
                         #p1, #f1 {                       
                                                 padding: 5px;                       
                                                 text-align: center;                       
                                                 background-color: white;                       
                                                 border: solid 2px green;                       
                                                 }                       
                         #p1 {                       
                                                 padding: 50px;                       
                                                 width:100px;                       
                                                 display:none;                       
                                                 color: green;                       
                                                 font-style: italic;                       
                                                 }                       
                         #f1 {                       
                                                 width:190px;                       
                                                 }                       
                         </                                     style                                     >                       
                         </                                     head                                     >                       
                         <                                     body                                     >                       
                         <                                     h1                                     align                                     =                                     "center"                                     >Silde Down Example</                                     h1                                     >                       
                         <                                     center                                     >                       
                         <                                     div                                     id                                     =                                     "f1"                                     >Slide down Effect</                                     div                                     >                       
                         <                                     div                                     id                                     =                                     "p1"                                     >Welcome to GeeksForGeeks.</                                     div                                     >                       
                         </                                     center                                     >                       
                         <                                     script                                     type                                     =                                     "text/javascript"                                     >                       
                                                 $("#f1").click(function(){                       
                                                 $("#p1").slideDown("slow");                       
                                                 });                       
                         </                                     script                                     >                       
                         </                                     body                                     >                       
                         </                                     html                                     >                       

输出： 在向下效应之前图片[3]-jQuery |动画、幻灯片方法和示例-yiteyi-C++库在下降效应之后图片[4]-jQuery |动画、幻灯片方法和示例-yiteyi-C++库

slideUp（）： 这种方法使元素向上滑动。语法：

$(selector).slideUp(speed,callback);

例子： 在这个例子中，我们展示了向上滑动的效果。如果单击了“向上滑动”面板，则会对HTML元素进行相应的更改。 代码：

                         <!DOCTYPE html>                       
                         <                                     html                                     >                       
                         <                                     head                                     >                       
                         <                                     script                                     src="                           https://ajax.googleapis.com/ajax/                                    
                                                 libs/jquery/3.3.1/jquery.min.js"></                                     script                                     >                       
                         <                                     style                                     type                                     =                                     "text/css"                                     >                       
                         #p2, #f2 {                       
                                                 padding: 5px;                       
                                                 text-align: center;                       
                                                 background-color: white;                       
                                                 border: solid 2px black;                       
                                                 }                       
                         #p2 {                       
                                                 padding: 50px;                       
                                                 width:100px;                       
                                                 color: green;                       
                                                 font-style: italic;                       
                                                 }                       
                         #f2 {                       
                                                 width:190px;                       
                                                 }                       
                         </                                     style                                     >                       
                         </                                     head                                     >                       
                         <                                     body                                     >                       
                         <                                     h1                                     align                                     =                                     "center"                                     >Slide Up Example</                                     h1                                     >                       
                         <                                     center                                     >                       
                         <                                     div                                     id                                     =                                     "f2"                                     >Slide up Effect</                                     div                                     >                       
                         <                                     div                                     id                                     =                                     "p2"                                     >Welcome to GeeksForGeeks.</                                     div                                     >                       
                         </                                     center                                     >                       
                         <                                     script                                     type                                     =                                     "text/javascript"                                     >                       
                                                 $("#f2").click(function(){                       
                                                 $("#p2").slideUp("slow");                       
                                                 });                       
                         </                                     script                                     >                       
                         </                                     body                                     >                       
                         </                                     html                                     >                       

输出： 在上升效应之前图片[5]-jQuery |动画、幻灯片方法和示例-yiteyi-C++库在上升效应之后图片[6]-jQuery |动画、幻灯片方法和示例-yiteyi-C++库

滑动切换（）： 此方法使图元向上/向下滑动。如果元件处于向上滑动位置，则会使其向下滑动。如果元件处于向下滑动位置，则会使其向上滑动。语法：

$(selector).slideToggle(speed,callback);

哪里

速度参数指定应用效果的速度。它们只能接受这些值：“慢”、“快”或毫秒。
回调参数指定在执行特定的滑动方法后要执行的函数。

例子： 在这个例子中，我们展示了向上滑动的效果。如果单击了“向上滑动”面板，则会对HTML元素进行相应的更改。 代码：

                         <!DOCTYPE html>                       
                         <                                     html                                     >                       
                         <                                     head                                     >                       
                         <                                     script                                     src="                           https://ajax.googleapis.com/                                    
                                                 ajax/libs/jquery/3.3.1/jquery.min.js">                       
                         </                                     script                                     >                       
                         <                                     style                                     type                                     =                                     "text/css"                                     >                       
                         #p3 ,#f3 {                       
                                                 padding: 5px;                       
                                                 text-align: center;                       
                                                 background-color: white;                       
                                                 border: solid 2px green;                       
                                                 }                       
                         #p3 {                       
                                                 padding: 50px;                       
                                                 width:100px;                       
                                                 color: green;                       
                                                 font-style: italic;                       
                                                 }                       
                         #f3 {                       
                                                 width:190px;                       
                                                 }                       
                         </                                     style                                     >                       
                         </                                     head                                     >                       
                         <                                     body                                     >                       
                         <                                     h1                                     align                                     =                                     "center"                                     >Slide Up/Down Example</                                     h1                                     >                       
                         <                                     center                                     >                       
                         <                                     div                                     id                                     =                                     "f3"                                     >Slide up/down Effect</                                     div                                     >                       
                         <                                     div                                     id                                     =                                     "p3"                                     >Welcome to GeeksForGeeks.</                                     div                                     >                       
                         </                                     center                                     >                       
                         <                                     script                                     type                                     =                                     "text/javascript"                                     >                       
                                                 $("#f3").click(function(){                       
                                                 $("#p3").slideToggle("slow");                       
                                                 });                       
                         </                                     script                                     >                       
                         </                                     body                                     >                       
                         </                                     html                                     >                       

输出： 效果之前图片[7]-jQuery |动画、幻灯片方法和示例-yiteyi-C++库第一次单击“向上/向下”条时图片[8]-jQuery |动画、幻灯片方法和示例-yiteyi-C++库第二次单击“向上/向下”条时图片[9]-jQuery |动画、幻灯片方法和示例-yiteyi-C++库

文章版权归作者所有，未经允许请勿转载。

THE END

Javascript