jQuery UI |切换()方法

jQuery UI框架提供了toggle()方法，用于根据所选元素的状态和用户选择的切换效果类型来显示显示或隐藏功能之间的切换。

句法：

(selector).toggle( effectType [, options ] [, duration ] [, complete ] )

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

• effectType：类型是字符串。它指定用于切换转换的效果类型。
• 选项：类型为object 。它为缓动选项指定面向效果的特定设置。
• 持续时间：类型是number或字符串 。这指定了切换效果应该运行多长时间。例如“快”、“慢”或默认值 400 毫秒。
• complete：这是切换效果完成时调用的回调方法。

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

jQuery UI 的链接：

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

示例 1：在下面的示例中， toggle()功能在 jQuery 代码中实现，具有pulsate效果类型，该类型作为参数传递，显示匹配元素的切换效果。脉动效果类型以打开或关闭的方式调整所选元素的不透明度。 ui-widget-content和ui-widget-header是 jQuery UI CSS 框架提供的内置类，使界面更具交互性和美观性。

      

    
     
      
    jQuery UI toggle method
      
    
    
              
    
    
      
    
    
      
    
        .mainDiv {
            width: 550px; 
            height: 180px;
        }
          
        #toggleBtnId {
            padding: .4em 1em;
            text-decoration: none; 
        }
      
        #container { 
            width: 300px;
            height: 150px; 
            padding: 0.3em;
            position: relative;
        }
  
        #container h3 { 
            margin: 0; 
            padding: 0.4em;
            text-align: center;
        }     
  
        .height{
            height: 10px;
        }
    
          
    
        $(function() {
            function toggleEffect() {
                $( "#container" ).toggle('pulsate', 500);
            };
              
            $( "#toggleBtnId" ).click(function() {
                toggleEffect();
                return false;
            });
        });
    

      

    
        GeeksforGeeks
    
      
    jQuery UI toggle method
      
    
      
    
        
              
            
                Toggle
            
              
            
                We are learning jQuery UI framework's
                toggle() method! Please click button
                to show and hide the above div.
            
        
    
      
    

  

输出：

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

  

    
      
    
          
    
        jQuery UI toggle 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() {
              
            // Toggle the selected effect
            // type by the user
            function toggleEffect() {
              
            var effectType = $( "#typesOfEffectId" ).val(); 
              
            // Toggle the effect with call back
            $( "#container" ).toggle( effectType, 800);
            };
              
            // Set effect from select menu value
            $( "#btnID" ).on( "click", function() {
                toggleEffect();
            });
        });
    

  

    
        GeeksforGeeks
     
      
    
        jQuery UI toggle method
        with all type of effects
    
      
    
      
    
          
        
            Toggle
      
            
                In this tutorial, we are going to
                learn about jQuery UI framework
                toggle method with different variety
                of effects. The type of effect is
                selected from combobox menu to get
                different toggle effects.
            
        
    
    
  
    
        Blind
        Clip
        Drop
        Explode
        Fade
        Fold
        Highlight
        Puff
        Shake
        Bounce 
        Slide
    
  
    
        Toggle Effect
    

  

输出：