jQuery |动画、幻灯片方法与示例

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

jQuery 动画：

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

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

在哪里

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

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

    

    

    
        div {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    

    

    
    
    Animate Me
    
        $("#animate").click(function() {
            $("div").animate({
                    width: "200px",
                    height: "200px",
                    borderRadius: "50%",
                    marginLeft: "210px",
                    marginTop: "70px",
                },
                2000,
            );
        });
    

    

输出：
在单击Animate Me之前

单击Animate Me后

jQuery 幻灯片：
使用 jQuery，我们可以在我们的网页中添加向上或向下滑动效果。幻灯片始终以 div 对的形式出现在网页中。在我们的网页中添加滑动效果的方法有以下三种：

• slideDown() ：此方法使元素向下滑动。
  句法：

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

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

   
  #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;
      }    
  
  
  
  Silde Down Example
  
  Slide down Effect
  Welcome to GeeksForGeeks.
  
   
      $("#f1").click(function(){
          $("#p1").slideDown("slow");
      });

  输出：
  下降效应之前
  
  下降效应之后
  

• slideUp()：此方法使元素向上滑动。
  句法：

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

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

   
  #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;
      }    
  
  
  
  Slide Up Example
  
  Slide up Effect
  Welcome to GeeksForGeeks.
  
   
      $("#f2").click(function(){
          $("#p2").slideUp("slow");
      });

  输出：
  上效果之前
  
  上效果后
  

• slideToggle() ：此方法使元素向上/向下滑动。
  如果元素处于向上滑动位置，则会使其向下滑动。
  如果元素处于向下滑动位置，则使其向上滑动。
  句法：

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

  在哪里

  • speed 参数指定应用效果的速度。它们只能接受以下值：“慢”、“快”或毫秒。
  • 回调参数指定执行特定幻灯片方法后要执行的函数。

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

   
  #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;
      }    
  
  
  
  Slide Up/Down Example
  
  Slide up/down Effect
  Welcome to GeeksForGeeks.
  
   
      $("#f3").click(function(){
          $("#p3").slideToggle("slow");
      });

  输出：
  效果前
  
  第一次单击向上/向下条时
  
  第二次单击向上/向下条时