.switchClass()

jQuery

previous page next page

.switchClass()

Categories: Effects | Effects Core

.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] ) Returns: jQuery

Description: Adds and removes the specified class(es) to each of the set of matched elements while animating all style changes.

  • .switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )

    • removeClassName
      Type: String
      One or more class names (space separated) to be removed from the class attribute of each matched element.
    • addClassName
      Type: String
      One or more class names (space separated) to be added to the class attribute of each matched element.
    • duration (default: 400)
      Type: Number or String
      A string or number determining how long the animation will run.
    • easing (default: swing)
      Type: String
      A string indicating which easing function to use for the transition.
    • complete
      Type: Function()
      A function to call once the animation is complete.

The .switchClass() method allows you to animate the transition of adding and removing classes at the same time.

Similar to native CSS transitions, jQuery UI's class animations provide a smooth transition from one state to another while allowing you to keep all the details about which styles to change in CSS and out of your JavaScript. All class animation methods, including .switchClass(), support custom durations and easings, as well as providing a callback for when the animation completes.

Not all styles can be animated. For example, there is no way to animate a background image. Any styles that cannot be animated will be changed at the end of the animation.

This plugin extends jQuery's built-in .switchClass() method. If jQuery UI is not loaded, calling the .switchClass() method may not fail directly, as the method still exists. However, the expected behavior will not occur.

Example:

Adds the class "blue" and removes the class "big" from the matched elements.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
                                  

                                    

                                      
                                        <!doctype html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html lang="en">
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <meta charset="utf-8">
                                    

                                  

                                  

                                    

                                        <title>switchClass demo</title>
                                    

                                  

                                  

                                    

                                        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                        div {
                                    

                                  

                                  

                                    

                                          width: 100px;
                                    

                                  

                                  

                                    

                                          height: 100px;
                                    

                                  

                                  

                                    

                                          background-color: #ccc;
                                    

                                  

                                  

                                    

                                        }
                                    

                                  

                                  

                                    

                                        .big {
                                    

                                  

                                  

                                    

                                          width: 200px;
                                    

                                  

                                  

                                    

                                          height: 200px;
                                    

                                  

                                  

                                    

                                        }
                                    

                                  

                                  

                                    

                                        .blue {
                                    

                                  

                                  

                                    

                                          background-color: #00f;
                                    

                                  

                                  

                                    

                                        }
                                    

                                  

                                  

                                    

                                        </style>
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        <div class="big">
                                        </div>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

                                      $( "div" ).click(function() {
                                    

                                  

                                  

                                    

                                        $( this ).switchClass( "big", "blue", 1000, "easeInOutQuad" );
                                    

                                  

                                  

                                    

                                      });
                                    

                                  

                                  

                                    

                                      
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>
 POWERED BYHERONOTE
previous page start next page