📜  jQuery UI | effect() 方法

📅  最后修改于: 2021-09-01 02:40:21             🧑  作者: Mango

jQuery UI框架提供了effect()方法来管理所选元素上的各种视觉效果,而无需使用 show() 和 hide() 方法。有许多类型的效果作为参数传递给effect()方法。

句法:

$(selector).effect(effectType[, options ] [, duration ] [, complete ]);

参数:此方法接受上面提到和下面描述的四个参数:

  • effectType:为所选元素的视觉过渡选择的效果类型。
  • 选项:选项或设置用于缓动效果。
  • 持续时间:用于运行动画效果的时间或持续时间(以毫秒为单位)。默认值为 400 毫秒。
  • complete:这是视觉效果完成时执行的回调函数。

jQuery UI 的链接:

有多种effectType可以根据项目要求传递给effect()方法。在下面的示例中,我们将仅展示其中的一些以及输出图像。

示例 1:下面的示例演示带有抖动效果的 jQuery UI effect()方法,选项设置为timedistance



  

    
    
  
    jQuery UI effect method
  
    
  
    
  
    
  
    
  
    

  

    

GeeksforGeeks

       jQuery UI effect method with shake option            
           
                     Click this to see the Shake effect!              
  

输出:

示例 2:以下代码演示了 jQuery UI effect()方法,具有爆炸效果,缓动设置为“swing”。



  

    
    
  
    jQuery UI effect with explode 
  
    
  
    
  
    
  
    
  
    

  

    

GeeksforGeeks

       jQuery UI effect method with explode option            
           
                     Click this to see the explode effect!              
  

输出:

示例 3:以下示例演示了具有反弹效果类型的effect()方法。



  

    
    
          
    jQuery UI effect Method with bounce
  
    
  
    
  
    
  
    
    

  

    

GeeksforGeeks

    jQuery UI effect method with bounce     
    
                     Click this to see bounce effect              
     

输出: