jQuery UI API - .toggleClass()

Category

Effects | Effects Core | Method Overrides

Usage

Description:When animating style changes, add or remove one or more classes to each element in the matched set, based on whether the class exists and the value of the switch parameter.

Returns:jQuery

.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )

Parameters Type Description Default value
ClassName String One or more class names to be toggled for each element in the matched set, separated by spaces.
switch Boolean A Boolean value specifying whether the class should be added or removed.
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() Function to call once the animation is complete.

.toggleClass( className [, switch ] [, options ] )

Parameters Type Description
ClassName String One or more class names to be toggled for each element in the matched set, separated by spaces.
switch Boolean A Boolean value specifying whether the class should be added or removed.
options Object All animation settings. All properties are optional.
  • duration(Default value:400）
    Type: Number or String
    Description: A string or number specifying how long the animation will run.
  • easing(Default value:swing）
    Type: String
    Description: A string indicating theeasingfunction.
  • complete
    Type: Function()
    Description: Function to call once the animation is complete.
  • children(Default value: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 animated element is very costly, and grows linearly with the number of descendants.
  • queue(Default value: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.Since jQuery 1.7, the queue option also accepts a string, in which case the animation is added to the queue represented by that string.

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 requiring JavaScript. All class animation methods, including.toggleClass(), allow custom animation duration andeasingeasing function, and also provide a callback when the animation completes.

Not all styles can be animated. For example, background images cannot be animated. Any style that cannot be animated will change at the end of the animation.

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

Example

Toggle the class "big-blue" for the matched elements.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>.toggleClass() 演示</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-blue {
    width: 200px;
    height: 200px;
    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></div>
 
<script>
$( "div" ).click(function() {
  $( this ).toggleClass( "big-blue", 1000, "easeOutSine" );
});
</script>
 
</body>
</html>

Other extensions