jQuery UI API - .switchClass()

Category

Effects | Effects Core | Method Overrides

Usage

Description:When the animation style changes, add and remove the specified class for each element in the matched set of elements.

Returns:jQuery

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

Parameter Type Description Default value
removeClassName String One or more class names to be removed from the class attribute of each matched element, separated by spaces.
addClassName String One or more class names to be added to the class attribute of each matched element, separated by spaces.
duration Number or String A string or number specifying how long the animation will run. 400
easing String A string indicating theeasingfunction. swing
complete Function() A function to be called once the animation is complete.

.switchClass( removeClassName, addClassName [, options ] )

Parameter Type Description
removeClassName String One or more class names to be removed from the class attribute of each matched element, separated by spaces.
addClassName String One or more class names to be added to the class attribute of each matched element, separated by spaces.
options Object All animation settings. All properties are optional.
  • duration(default:400）
    Type: Number or String
    Description: A string or number specifying how long the animation will run.
  • easing(default:swing）
    Type: String
    Description: A string indicating whicheasingfunction.
  • complete
    Type: Function()
    Description: A function to be called once the animation is complete.
  • children(default:false）
    Type: Boolean
    Description: Specifies whether the animation should be applied to all descendants of the matched elements. This feature should be used with caution, because determining whether an element is a descendant of the animation is expensive and grows linearly with the number of descendants.
  • queue(default:true）
    Type: Boolean or String
    Description: A boolean value indicating whether to place the animation in the effects queue. If false, the animation will begin immediately.As of jQuery 1.7, the queue option also accepts a string, in which case the animation is added to the queue represented by that string.

.switchClass()The method allows you to add a class while removing a class during the animation transition.

Similar to native CSS transitions, jQuery UI's class animations provide a smooth transition from one state to another, while ensuring that all style change details are handled through CSS without the need for JavaScript. All class animation methods, including.switchClass(), allow custom animation duration andeasingfunctions, and also provide a callback when the animation is complete.

Not all styles can be animated. For example, animating background images. Any style that cannot be animated will change when the animation ends.

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

Example

Add the class "blue" to the matched elements and remove the class "big" from the matched elements.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>.switchClass() 演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  div {
    width: 100px;
    height: 100px;
    background-color: #ccc;
  }
  .big {
    width: 200px;
    height: 200px;
  }
  .blue {
    background-color: #00f;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<div class="big"></div>
 
<script>
$( "div" ).click(function() {
  $( this ).switchClass( "big", "blue", 1000, "easeInOutQuad" );
});
</script>
 
</body>
</html>

Other Extensions