jQuery UI 剪辑效果

在本文中，我们将使用 jQuery UI展示剪辑效果。单击动作按钮时，所有内容将从顶部和底部同时消失，这实际上触发了剪辑效果脚本。

句法：

$( ".selector" ).effect( 
    selectedEffect, options, time(in ms), callback 
);

参数：

• selectedEffect: jQuery UI 中开发者选择的效果。
• 选项：为某些功能添加（可选）。
• 时间：以微秒为单位完成效果的时间。
• 回调：为某些功能添加（可选）。

返回值：它不返回任何值。

添加的脚本：请下载包含用于代码实现的预编译文件的库，或使用以下给定脚本的路径。

示例：在本示例中，我们将使用 jQuery UI显示剪辑效果。我们将使用按钮触发脚本。

HTML

  

    
    
  
    
  
    
    
  
    
    
  
    
        $(function () {
            function action(selectedEffect) {
                $("#effect").effect(selectedEffect, 1200);
            };
            $("#button").on("click", function () {
                action("clip");
                return false;
            });
        });
    
  
    
        .animation {
            width: 500px;
            height: 500px;
            position: absolute;
        }
  
        #button {
            padding: .5em 1em;
            text-decoration: none;
            position: absolute;
        }
  
        #effect {
            width: 250px;
            height: 190px;
            padding: 15px;
            position: relative;
        }
    

  

    
        Geeks for Geeks Clip 
        Effect Using jQuery UI
    
      
    
        
  
            
                Geeks For Geeks
            
        
    
  
    
        
            Action
        
    

  

输出 ：