如何在 JavaScript 中同时执行 fadeOut() 和 slideUp() ？

给定一个文档，任务是在 JavaScript 的帮助下同时执行fadeOut() 和slideUP()。这里讨论了 2 种方法。

方法一：
首先选择元素。使用animate() 方法来执行这两个操作，该方法有 4 个参数，但在这种情况下只使用了 2 个。第一个是我们想要动画的 CSS，第二个是速度。 CSS 是 { height: 0, opacity: 0} 并且使用的速度是“慢”。 Height 属性用于执行上滑效果，不透明度用于执行淡出效果。

• 示例：此示例实现了上述方法。

    
  
      
          Perform fadeOut() and slideUp()
        at the same time with JavaScript
      
      
          #div {
              background: green;
              height: 100px;
              width: 200px;
              margin: 0 auto;
              color: white;
          }
      
      
      
  
    
  
        
              GeeksForGeeks  
          
      
      
      
          This is Div box.
      
      
      
          click here
      
      
      
      
      
          $('#GFG_UP').text(
            "Click on button to perform fadeOut and slideUp at same time.");
    
          function GFG_Fun() {
              $("#div").animate({
                  height: 0,
                  opacity: 0
              }, 'slow');
              $('#GFG_DOWN').text(
                "Both operations performed simultaneously.");
          }
      
  
    

• 输出：
  

方法二：
首先选择元素。使用“ animate() 方法来执行这两个操作，该方法有 4 个参数，但在这种情况下只使用了 2 个。第一个是我们想要动画的 CSS，第二个是速度。 CSS 是 { height: 'toggle', opacity: 'toggle'} 并且使用的速度是 'slow'。 Height 属性用于执行上滑效果，不透明度用于执行淡出效果。这个例子也可以逆转效果。

• 示例：此示例实现了上述方法。

    
  
      
          Perform fadeOut() and slideUp() 
        at the same time with JavaScript
      
      
          #div {
              background: green;
              height: 100px;
              width: 200px;
              margin: 0 auto;
              color: white;
          }
      
      
      
  
    
  
        
              GeeksForGeeks  
          
      
      
      
          This is Div box.
      
      
      
          click here
      
      
      
      
      
          $('#GFG_UP').text(
         "Click on button to perform fadeOut and slideUp at same time.");
    
          function GFG_Fun() {
              $("#div").animate({
                  height: 'toggle',
                  opacity: 'toggle'
              }, 'slow');
              $('#GFG_DOWN').text(
             "Both operations performed simultaneously.");
          }
      
  
    

• 输出：