2 <ul class=
"UIAPIPlugin-toc">
3 <li><a href=
"#overview">Overview
</a></li>
4 <li><a href=
"#options">Arguments
</a></li>
6 <div class=
"UIAPIPlugin">
7 <h1>jQuery UI addClass
</h1>
9 <h2 class=
"top-header">Overview
</h2>
10 <div id=
"overview-main">
11 <div class=
"editsection" style=
"float:right;margin-left:5px;">[
<a href=
"http://docs.jquery.com/action/edit/UI/Effects/addClass?section=1" title=
"Edit section: addClass( class, [duration] )">edit
</a>]
</div><a name=
"addClass.28_class.2C_.5Bduration.5D_.29"></a><h3>addClass( class,
<span class=
"optional">[
</span>duration
<span class=
"optional">]
</span> )
</h3>
12 <p>Adds the specified class to each of the set of matched elements with an optional transition between the states.
</p>
14 <div id=
"overview-dependencies">
20 <div id=
"overview-example">
22 <div id=
"overview-example" class=
"example">
23 <ul><li><a href=
"#demo"><span>Demo
</span></a></li><li><a href=
"#source"><span>View Source
</span></a></li></ul>
24 <p><div id=
"demo" class=
"tabs-container" rel=
"100">
25 Adds the class 'selected' to the matched elements with a one second transition.
<br />
27 <pre>$(
"p
").
<a href=
"http://docs.jquery.com/Events/click" title=
"Events/click">click
</a>(function () {
28 $(this).
<strong class=
"selflink">addClass
</strong>(
"selected
",
1000);
31 <p></div><div id=
"source" class=
"tabs-container">
33 <pre><!DOCTYPE html
>
36 <link href=
"http://ajax.googleapis.com/ajax/libs/jqueryui/
1.8/themes/base/jquery-ui.css
" rel=
"stylesheet
" type=
"text/css
"/
>
37 <script src=
"http://ajax.googleapis.com/ajax/libs/jquery/
1.4/jquery.min.js
"></script
>
38 <script src=
"http://ajax.googleapis.com/ajax/libs/jqueryui/
1.8/jquery-ui.min.js
"></script
>
39 <script src=
"http://ui.jquery.com/latest/ui/effects.core.js
"></script
>
40 <style type=
"text/css
">
41 p { cursor: pointer; font-size:
1.2em; }
42 .selected { color:red; }
45 $(document).ready(function() {
46 $(
"p
").
<a href=
"http://docs.jquery.com/Events/click" title=
"Events/click">click
</a>(function () {
47 $(this).
<strong class=
"selflink">addClass
</strong>(
"selected
",
1000);
52 <body
style=
"font-size:62.5%;">
53 <p
>Click me to add a 'selected' class.
</p
>
54 <p
>Click me to add a 'selected' class.
</p
>
55 <p
>Click me to add a 'selected' class.
</p
>
64 <h2 class=
"top-header">Arguments
</h2>
65 <ul class=
"options-list">
67 <li class=
"option" id=
"option-class">
68 <div class=
"option-header">
69 <h3 class=
"option-name"><a href=
"#option-class">class
</a></h3>
71 <dt class=
"option-type-label">Type:
</dt>
72 <dd class=
"option-type">String
</dd>
76 <div class=
"option-description">
77 <p>One CSS class to add to the elements.
</p>
82 <li class=
"option" id=
"option-duration">
83 <div class=
"option-header">
84 <h3 class=
"option-name"><a href=
"#option-duration">duration
</a></h3>
86 <dt class=
"option-type-label">Type:
</dt>
87 <dd class=
"option-type">String, Number
</dd>
89 <dt class=
"option-optional-label">Optional
</dt>
93 <div class=
"option-description">
94 <p>A string representing one of the three predefined speeds (
"slow",
"normal", or
"fast") or the number of milliseconds to run the animation (e.g.
1000).
</p>
103 Pre-expand include size: 5228 bytes
104 Post-expand include size: 6863 bytes
105 Template argument size: 4285 bytes
106 Maximum: 2097152 bytes
109 <!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:2606-1!1!0!!en!2 and timestamp 20100805161635 -->