jQuery UI | show() 方法

jQuery UI 框架的show()方法为匹配的选定元素显示或管理所有类型的视觉效果，这些元素的样式是在用户界面的 CSS 代码中设计的。

句法：

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

参数：它接受一个参数“effectType”，它是将要添加的视觉效果的类型。

• effectType：类型是字符串 。它指定用于过渡的效果类型。
• 选项：类型为object 。它指定了特定缓动设置所需的选项。
• 持续时间：类型是number或字符串 。这指定了动画效果应该运行多长时间，例如fast 、 slow或400ms
• complete：这是动画效果完成时调用的回调方法。

返回值：它返回具有给定视觉效果的选定元素。

jQuery UI 的链接：

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

示例1：在下面的示例中， show()函数是在jQuery 代码中实现的，它以摇动效果类型和时间和距离为选项，并以一个回调函数为参数，显示匹配元素的视觉效果。在效果完成或在屏幕上完成后调用回调函数。回调函数在过程中效果完成后淡出容器。

  

    
    
  
    jQuery UI show() method
  
    
  
    
    
  
    
    
  
    
        .height {
            height: 10px;
        }
  
        .divClass {
            width: 400px;
            height: 180px;
        }
  
        #btnID {
            padding: .5em 1em;
            text-decoration: none;
        }
  
        #container {
            position: relative;
            width: 260px;
            height: 145px;
            padding: 0.3em;
            border: 1px solid black
        }
    
  
    
        $(function () {
  
            function showEffect() {
  
                // Run the show  method with shake effect
                $("#container").show("shake", { times: 10,
                        distance: 200 }, 2000, callback);
            };
  
            // Callback method
            function callback() {
                setTimeout(function () {
                    $("#container:visible")
                        .removeAttr("style").fadeOut();
                }, 2000);
            };
            $("#btnID").click(function () {
                showEffect();
                return false;
            });
            $("#container").hide();
        });
    

  

    GeeksforGeeks
  
    jQuery UI show method 
    
  
    
        
            
                This is jQuery UI show method demonstration,
                which displays the matched elements.The
                 matched element will show the element with
                  the chosen effect in the jQuery code.
            
        
    
  
    
    Show effect

  

输出：

示例2：在下面的示例中， show()方法的简单实现是在jQuery 代码中完成的，以反弹视觉效果为参数。该方法应用于用户界面页面的“h2”元素。 ui-corner-all和ui-state-default是 jQuery UI CSS 框架提供的内置类，使 UI 更具交互性和美观性。

  

    
        jQuery UI Show Method with bounce effect
    
  
    
  
    
  
    
    
  
    
    
  
    
        #btnID {
            padding: .4em 1.5em;
            text-decoration: none;
        }
  
        .highlight {
            color: #090;
            font-family: Calibri;
            font-size: 2em;
            text-shadow: 2px 2px #FF0000;
        }
  
        .height {
            height: 10px;
        }
    
  
    
        $(document).ready(function () {
            $("h2").hide();
            $("#btnID").click(function () {
  
                // Show with bounce effect
                $("h2").show("bounce", 3000);
            })
        });
    

  

    GeeksforGeeks
    jQuery UI show method with bounce effect
    
    Learning jQuery UI 
  
    
        Show effect
    

  

输出：

示例 3： jQuery UI 框架提供了show()方法，该方法具有多种视觉效果作为其参数。在下面的示例中，我们将演示使用组合框菜单选项由用户选择视觉效果类型的方法。当用户选择了效果类型时，将其传递给show()方法进行输出，如输出图像所示。程序员可以根据项目要求编写代码并选择参数。

  

    
    
  
    jQuery UI Show Method with All effects
      
    
  
    
    
  
    
    
  
    
        .height {
            height: 10px;
        }
  
        .divClass {
            width: 500px;
            height: 200px;
        }
  
        #btnID {
            padding: .4em 1em;
            text-decoration: none;
        }
  
        #container {
            width: 250px;
            height: 180px;
            padding: 0.5em;
            position: relative;
        }
  
        #container h4 {
            margin: 0;
            padding: 0.3em;
            text-align: center;
        }
    
  
    
        $(function () {
  
            // show the selected effect
            // type by the user
            function showEffect() {
  
                var effectType = $("#typesOfEffectId").val();
  
                // show the effect with call back
                $("#container").show(effectType, 800, callback);
            };
  
            // Callback function to get original state
            function callback() {
                setTimeout(function () {
                    $("#container:visible")
                        .removeAttr("style").fadeOut();
                }, 2000);
            };
  
            // Set effect from select menu value
            $("#btnID").on("click", function () {
                showEffect();
            });
  
            $("#container").hide();
        });
    

  

    GeeksforGeeks
    jQuery UI show method with all type of effects
  
    
      
    
        
            Show
            
                In this tutorial, we are going to learn about
                jQuery UI framework show method with different
                variety of effects.
            
        
    
  
    
        Blind
        Clip
        Drop
        Explode
        Fade
        Fold
        Highlight
        Puff
        Pulsate
        Slide
    
  
    
        show Effect
    

  

输出：