📜  在 jQuery 中提供效果的方法有哪些?

📅  最后修改于: 2022-05-13 01:56:03.147000             🧑  作者: Mango

在 jQuery 中提供效果的方法有哪些?

jQuery 中的效果通常用于向网页添加动画。 jQuery 库有几种方法可以用来为网页制作自定义动画。在本文中,我们将看到 jQuery 中可用于制作动画的所有方法。我们将讨论所有方法以及 jQuery 代码片段和输出。

1. animate() 方法:该方法用于制作带有某些选定 CSS 属性的自定义动画。例如,高度、宽度等可以使用此方法进行动画处理。

示例:在此示例中,我们正在为球体的大小设置动画。

HTML


  

  
    
    
  
    Animate Method
    

  

    
        
        
    
          


HTML


  

  
    
    
  
    
    

  

    
        
        
                                  
    
               


HTML


  

    
    
  
    

  

    
        
        
        
        
        
    
               


HTML


  

  
    
    
  
    Dequeue method
  
    

  

    
        

GeeksforGeeks

             
               


HTML


  

  
    
    
  
    Fade in method
  
    

  

    
        

GeeksforGeeks

             
               


HTML


  

  
    
    
  
    Fade out method
  
    

  

    
        

GeeksforGeeks

             
               


HTML


  

  
    
    
  
    FadeTo method
    

  

    
        

GeeksforGeeks

             
               


HTML


  

    
    
  
    FadeToggle method
      
    

  

    
        

GeeksforGeeks

             
               


HTML


  

    
    
  
    Hide method
      
    

  

    
        

GeeksforGeeks

             
               


HTML


  

    
    
  
    Queue method
      
    

  

    
        

Total functions in the queue:

           
             
               


HTML


  

    
    
  
    Show method
      
    

  

    
        

GeeksforGeeks

             
               


HTML


  

  
    
    
  
    SlideDown method
      
    

  

    
        

GeeksforGeeks

             
               


输出:

2. clearQueue() 方法:该方法将用于从队列中移除所有仍在等待运行的项目。例如,我们正在为五个元素设置动画,在这之间我们使用了 .clearQueue ,然后它将从该点停止动画。还有一件事要明确,一旦动画开始,我们不会停止任何特定的动画,它将完成其独立动画。

示例:在此示例中,我们在多个阶段为形状设置动画,并使用 .clearQueue() 方法停止动画。

HTML



  

  
    
    
  
    
    

  

    
        
        
                                  
    
               

输出:

3. delay() 方法:该方法将用于在队列中存在的几个项目的动画之间进行延迟。借助此方法,我们将设置一个计时器,以便每个动画都以特定的时间间隔开始。

示例:在此示例中,我们使用 delay 方法每秒延迟动画。

HTML



  

    
    
  
    

  

    
        
        
        
        
        
    
               

输出:

4. dequeue() 方法: .dequeue() 方法用于将某个函数从队列中排除,然后执行该函数的其余部分。例如,我们有一个有五个元素的队列,我们想从队列中删除第三个元素,那么我们将调用 .dequeue() 方法,dequeue 方法将与 queue 方法一起调用。

示例:在这个例子中,形状的大小将被动画化,我们将在整个动画过程中使用一个函数来改变形状的颜色一次,然后在 dequeue 方法的帮助下,我们将排除该函数以便休息队列中等待的函数将运行。

HTML



  

  
    
    
  
    Dequeue method
  
    

  

    
        

GeeksforGeeks

             
               

输出:

5.fadeIn() 方法: FadeIn 意味着使任何特定元素可见。此方法只是根据不透明度从 0% 到 100% 为元素设置动画。

示例:在此示例中,文本将在单击按钮时淡入。

HTML



  

  
    
    
  
    Fade in method
  
    

  

    
        

GeeksforGeeks

             
               

输出:

6.fadeOut() 方法:该方法的行为与fadeIn 正好相反,该方法将动画元素从不透明变为透明。

示例:在此示例中,文本将在单击按钮时淡出。

HTML



  

  
    
    
  
    Fade out method
  
    

  

    
        

GeeksforGeeks

             
               

输出:

7.fadeTo() 方法:我们可以使用这个方法将任何特定元素设置为特定的不透明度值。例如,如果我们想让任何隐藏元素可见但只有 50% 可见,那么我们必须使用此方法。

示例:在此示例中,我们将文本淡出至不透明度的 50%。

HTML



  

  
    
    
  
    FadeTo method
    

  

    
        

GeeksforGeeks

             
               

输出:

8.fadeToggle()方法:我们可以使用这个方法来制作一个带有fadeIn和fadeOut的切换动画。

示例:在此示例中,单击按钮时在淡入和淡出之间切换。

HTML



  

    
    
  
    FadeToggle method
      
    

  

    
        

GeeksforGeeks

             
               

输出:

9. hide() 方法:我们可以借助该方法隐藏选中的元素。

示例:在此示例中,我们在单击按钮时隐藏文本。

HTML



  

    
    
  
    Hide method
      
    

  

    
        

GeeksforGeeks

             
               

输出:

10. queue() 方法:该方法用于显示或操作正在特定元素上执行的函数队列。一个或多个函数可能在等待运行的队列中。一个元素可以有多个队列。

示例:在此示例中,我们可以看到队列中有多少方法。  

HTML



  

    
    
  
    Queue method
      
    

  

    
        

Total functions in the queue:

           
             
               

输出:

11. show() 方法:该方法将用于显示从隐藏状态中选择的元素。

示例:在此示例中,我们在按钮单击时显示文本。

HTML



  

    
    
  
    Show method
      
    

  

    
        

GeeksforGeeks

             
               

输出:

12. slideDown() 方法:将显示一个元素与向下滑动动画。

示例:文本将在单击按钮时以向下滑动的动画上升。

HTML



  

  
    
    
  
    SlideDown method
      
    

  

    
        

GeeksforGeeks

             
               

输出: