jQuery UI API - .toggleClass ()
category
Special effects (Effects) | Effects Core (Core Effects) | Method overloading (Method Overrides)
usage
Description: When the animation style changed, according to Class existence and value of switch parameter within the set of matched elements of each element to add or remove one or more Class.
Returns: the jQuery
参数 | 类型 | 描述 | 默认值 |
---|---|---|---|
ClassName | String | 为匹配的元素集合中的每个元素要切换的一个或多个 class 名称,多个 class 名称用空格分隔 。 | |
switch | Boolean | 一个布尔值,指定 class 应被添加还是被移除。 | |
duration | Number 或 String | 一个字符串或一个数字,指定动画将运行多久。 | 400 |
easing | String | 一个字符串,指示要使用的 easing 函数。 | swing |
complete | Function() | 一旦动画完成时要调用的函数。 |
参数 | 类型 | 描述 |
---|---|---|
ClassName | String | 为匹配的元素集合中的每个元素要切换的一个或多个 class 名称,多个 class 名称用空格分隔 。 |
switch | Boolean | 一个布尔值,指定 class 应被添加还是被移除。 |
options | Object | 所有的动画设置。所有的属性是可选的。
|
Transition similar to the native CSS, jQuery UI's animation class provides a smooth transition from one state to another state of transition, while ensuring that all the details of the style change is done via CSS without using JavaScript. All class animation, comprising .toggleClass()
, allows custom duration of the animation and easing function, the animation is complete also provides a callback.
Not all styles can be animated to add. For example, the background image animated. Not any animation style will change when the movie ends.
The plug-in extensions from jQuery built .toggleClass () method. If jQuery UI is not loaded, call .toggleClass()
method does not simply fail, because the method exists in jQuery. But it is not expected behavior.
Examples
To match the switching element class "big-blue".
<! Doctype html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> .toggleClass () Demo </ 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>