0byt3m1n1
Path:
/
data
/
applications
/
aps
/
tikiwiki
/
3.2.0-5
/
standard
/
htdocs
/
lib
/
jquery
/
jquery-ui
/
docs
/
[
Home
]
File: switchClass.html
<p>« <a href="http://docs.jquery.com/UI/Effects" title="UI/Effects">Back to UI/Effects</a><div class="api"><div> </div><a name="removeaddduration"></a><div class="section-edit">[<a href="/action/edit/UI/Effects/switchClass">edit</a>]</div> </p> <a name="switchClass.28.C2.A0remove.2C.C2.A0add.2C.C2.A0.5Bduration.5D_.29"></a><h3> <strong class="selflink">switchClass</strong>( remove, add, <span class="optional">[</span>duration<span class="optional">]</span> ) </h3> <p><div class="entry"> <ul class="tabs-nav"> <li><a href="#overview"><span>Overview</span></a></li> <li><a href="#toptions"><span>Options</span></a></li> <li><a href="#examples"><span>Examples</span></a></li> <li><a href="#discuss" class="tabs-disabled"><span>Discuss</span></a></li> </ul> <div id="overview" class="tabs-container"> </p> <div class="desc"><div>Switches from the class defined in the first argument to the class defined as second argument, using an optional transition.</div> <div class="longdesc"></div></div><div class="args"><b class="args">Arguments:</b><table class="args" cellspacing="0"><tr class="option"><th>remove</th><td class="type">String</td><td class="default"></td></tr><tr><td colspan="3" class="desc">The CSS class that will be removed.</td></tr><br /><tr class="option"><th>add</th><td class="type">String</td><td class="default"></td></tr><tr><td colspan="3" class="desc">The CSS class that will be added.</td></tr><br /><tr class="option"><th>duration<span class="optional"> (Optional)</span></th><td class="type">String, Number</td><td class="default"></td></tr><tr><td colspan="3" class="desc">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).</td></tr></table></div> </div> <p><div id="examples" class="options examples tabs-container"><b class="options">Examples:</b><table class="options examples" cellspacing="0"><thead><tr><th>Name</th><th>Type</th></tr></thead><tbody> <div class="example"> <ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul> <div id="demo" class="tabs-container" rel="125"> Switch the class 'highlight' to 'blue' when a paragraph is clicked with a one second transition.<br /> </p> <pre> $("p").<a href="http://docs.jquery.com/Events/click" title="Events/click">click</a>(function () { $(this).<strong class="selflink">switchClass</strong>("highlight", "blue", 1000); }); </pre> <p></div><div id="source" class="tabs-container"> </p> <pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<a href="http://www.w3.org/TR/html4/loose.dtd" class="external free" title="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</a>"> <html> <head> <script src="<a href="http://code.jquery.com/jquery-latest.js" class="external free" title="http://code.jquery.com/jquery-latest.js">http://code.jquery.com/jquery-latest.js</a>"></script> <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script> <script> $(document).ready(function(){ $("p").<a href="http://docs.jquery.com/Events/click" title="Events/click">click</a>(function () { $(this).<strong class="selflink">switchClass</strong>("highlight", "blue", 1000); }); }); </script> <style> p { margin: 4px; font-size:16px; font-weight:bolder; cursor:pointer; } .blue { background: blue; } .highlight { background:yellow; } </style> </head> <body> <p class="highlight">Click to switch</p> <p class="highlight">to blue</p> <p class="highlight">on these</p> <p class="highlight">paragraphs</p> </body> </html> </pre> <p></div> </p><p></div> </tbody></table></div> </p><p></div></div> </p><!-- Pre-expand include size: 12451 bytes Post-expand include size: 11910 bytes Template argument size: 4449 bytes Maximum: 2097152 bytes --> <!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:2609-1!1!0!!en!2 and timestamp 20090303130311 -->