jQuery UI | switchClass() 方法

jQuery UI框架提供了switchClass()方法，可以帮助程序员从一个 CSS 类切换到另一个 CSS 类，并以平滑的方式管理从一种状态到另一种状态的转换。此方法基本上添加和删除定义的类以及动画 CSS 代码的样式定义。

句法：

$(selector).switchClass( removeClassName, addClassName, 
                duration, easing, complete )


.switchClass( removeClassName, addClassName, options )Parameters:

• removeClassName：多个类之间用空格隔开。用于删除的 CSS 类的名称。类型是字符串。
• addClassName：多个类之间用空格隔开。用于向所有选定元素添加动画的 CSS 类的名称。
• 持续时间：用于运行动画效果的时间或持续时间（以毫秒为单位）。默认值为 400 毫秒。类型是number或字符串 。
• 缓动：用于动画缓动效果的选项或设置。默认值为"swing" 。
• complete：这是视觉效果完成时执行的回调函数。
• 孩子：类型是Boolean 。这提到动画是否应该应用于所选元素的所有子项或后代。
• queue：类型是字符串或Boolean 。它提到动画是否应该放在效果队列中。

jQuery UI 的链接：

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

示例 1：在下面的示例中，我们将使用 jQuery 代码演示switchClass()方法，并在页面的 HTML 部分处理视觉效果。结果的输出图像也如下所示。

      

    
     
      
    jQuery UI switchClass method
  
    
    
          
    
  
    
    
      
    
        .finalClass {
            padding:10px 10px;
            font-family: Calibri;
            font-size: 24px;             
            font-weight: bold;
            color: red;
        }
        .initialClass {
            padding:10px 10px;
            font-family: Calibri;
            font-size: 18px;         
            font-weight: bold;
            color: green;
        }
        #divID{
        text-align:center;
        border:1px solid black;
        width:300px;
        height:100px;
        }
      
        .height{ 
            height: 10px;
        }
    
          
    
        $(function() {
            $('#switchBtnId').click(function() {
            $(".initialClass").switchClass(
                    "initialClass", "finalClass", '500');
                      
            $(".finalClass").switchClass(
                    "finalClass", "initialClass", '500');
                      
            return false;
            });
        });
    

      

    GeeksforGeeks
      
    jQuery UI switchClass method
      
    
      
    
        
            Learning jQuery UI !
        
          
        
            Welcome to GFG website!
        
    
    
      
    

  

输出：

示例 2：

  

    
    
  
    jQuery UI switchClass method
      
    
    
          
    
    
      
    
    
  
    
        div {
            width: 100px;
            height: 100px;
            background-color: #e9e9e9;
            text-align: center;
            padding: 10px 10px;
        }
          
        .newClass {
            width: 200px;
            height: 200px;
        }
          
        .bgClass {
            background-color: green;
        }
    

  

    GeeksforGeeks
      
    jQuery UI switchClass method
    
      
    Click this
      
    
        $("div").click(function() {
            $(this).switchClass("newClass",
                    "bgClass", 2000, "swing");
                      
            $(this).switchClass("bgClass",
                    "newClass", 2000, "swing");
        });
    

  

输出：