jQuery UI | effect() 方法

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

句法：

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

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

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

jQuery UI 的链接：

href=”https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css”rel=”stylesheet”type=”text/css”/>

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

示例 1：下面的示例演示带有抖动效果的 jQuery UI effect()方法，选项设置为time和distance 。

  

    
    
  
    jQuery UI effect method
  
    
  
    
    
  
    
    
  
    
        #divID {
            width: 200px;
            height: 150px;
            text-align: center;
            background: green;
            border: 1px solid black;
        }
  
        .height {
            height: 10px;
        }
    
  
    
        $(document).ready(function () {
            $('#divID').click(function () {
                $("#divID").effect("shake", {
                    times: 20,
                    distance: 180
                }, 3000, function () {
                    $("#divID").css(
                        "background", "#ff0000");
                });
            });
        });  
    

  

    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 
  
    
  
    
    
  
    
    
  
    
        #divID {
            height: 200px;
            width: 200px;
            text-align: center;
            background: green;
            border: 1px solid black;
        }
  
        .height {
            height: 10px;
        }
    
  
    
        $(document).ready(function () {
            $('#divID').click(function () {
                $("#divID").effect({
                    effect: "explode",
                    easing: "swing",
                    pieces: 12,
                    duration: 3000
                });
            });
        });  
    

  

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

  

输出：

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

  

    
    
          
    jQuery UI effect Method with bounce
  
    
  
    
    
  
    
    
  
    
        #divID {
            height: 100px;
            width: 200px;
            background: green;
            text-align: center;
            border: 1px solid black;
        }
  
        .height {
            height: 10px;
        }
    
    
        $(document).ready(function () {
            $('#divID').click(function () {
                $("#divID").effect("bounce", {
                    times: 20,
                    distance: 200
                }, 3000, function () {
                    $(this).css("background", "#ff0000");
                });
            });
        });  
    

  

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

  
  

输出：