Latest web development tutorials

jQuery UI API - .addClass ()


Special effects (Effects) | Effects Core (Core Effects) | Method overloading (Method Overrides)


Description: When the animation style changed for each element of the set of matched elements within Adds the specified Class.

Returns: the jQuery

.addClass( className [, duration ] [, easing ] [, complete ] )

参数 类型 描述 默认值
className String 要添加到每个匹配的元素的 class 属性中的一个或多个 class 名称,多个 class 名称用空格分隔。
duration Number 或 String 一个字符串或一个数字,指定动画将运行多久。 400
easing String 一个字符串,指示要使用的 easing 函数。 swing
complete Function() 一旦动画完成时要调用的函数。

.addClass( className [, options ] )

参数 类型 描述
className String 要添加到每个匹配的元素的 class 属性中的一个或多个 class 名称,多个 class 名称用空格分隔。
options Object 所有的动画设置。所有的属性是可选的。
  • duration (默认值: 400
    类型:Number 或 String
  • easing (默认值: swing
    描述:一个字符串,指示要使用的 easing 函数。
  • complete
  • children (默认值: false
  • queue (默认值: true
    类型:Boolean 或 String
    描述:一个布尔值,指示是否将动画放在特效队列中。如果是 false,动画将立即开始。 自 jQuery 1.7 起 ,queue 选项也接受一个字符串,在这种情况下,动画添加到由字符串表示的队列中。

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 .addClass() , 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 at the end of the animation.

The plug-in extensions from jQuery built .addClass () method. If jQuery UI is not loaded, call .addClass() method does not simply fail, because the method exists in jQuery. But it is not expected behavior.


Add class "big-blue" to the matching element.

<! Doctype html>
<Html lang = "en">
  <Meta charset = "utf-8">
  <Title> .addClass () Demo </ title>
  <Link rel = "stylesheet" href = "//">
  div {
    width: 100px;
    height: 100px;
    background-color: #ccc;
  .big-blue {
    width: 200px;
    height: 200px;
    background-color: # 00f;
  </ Style>
  <Script src = "//"> </ script>
  <Script src = "//"> </ script>
</ Head>
<Div> </ div>
$ ( "Div") .click (function () {
  $ (This) .addClass ( "big-blue", 1000, "easeOutBounce");
</ Script>
</ Body>
</ Html>