{"id":132,"date":"2023-08-25T17:41:07","date_gmt":"2023-08-25T17:41:07","guid":{"rendered":"\/\/api.jqueryui.com\/1.12\/?p=132"},"modified":"2023-08-25T17:41:07","modified_gmt":"2023-08-25T17:41:07","slug":"switchClass","status":"publish","type":"post","link":"https:\/\/api.jqueryui.com\/1.12\/switchClass\/","title":{"rendered":".switchClass()"},"content":{"rendered":"<article id=\"switchClass1\" class=\"entry method\"><h2 class=\"section-title\">\n<span class=\"name\">.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )<\/span><span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#jQuery\">jQuery<\/a><\/span>\n<\/h2>\n<div class=\"entry-wrapper\">\n<p class=\"desc\"><strong>Description: <\/strong>Adds and removes the specified class(es) to each of the set of matched elements while animating all style changes.<\/p>\n<ul class=\"signatures\">\n<li class=\"signature\">\n<h4 class=\"name\"><a id=\"switchClass-removeClassName-addClassName-duration-easing-complete\" href=\"#switchClass-removeClassName-addClassName-duration-easing-complete\"><span class=\"icon-link\"><\/span>.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )<\/a><\/h4>\n<ul>\n<li id=\"switchClass-removeClassName-addClassName-duration-easing-complete-removeClassName\">\n<div><strong>removeClassName<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>One or more class names (space separated) to be removed from the class attribute of each matched element.<\/div>\n<\/li>\n<li id=\"switchClass-removeClassName-addClassName-duration-easing-complete-addClassName\">\n<div><strong>addClassName<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>One or more class names (space separated) to be added to the class attribute of each matched element.<\/div>\n<\/li>\n<li id=\"switchClass-removeClassName-addClassName-duration-easing-complete-duration\">\n<div>\n<strong>duration<\/strong> (default: <code>400<\/code>)<\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Number\">Number<\/a> or <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>A string or number determining how long the animation will run.<\/div>\n<\/li>\n<li id=\"switchClass-removeClassName-addClassName-duration-easing-complete-easing\">\n<div>\n<strong>easing<\/strong> (default: <code>swing<\/code>)<\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>A string indicating which <a href=\"\/1.12\/easings\/\">easing<\/a> function to use for the transition.<\/div>\n<\/li>\n<li id=\"switchClass-removeClassName-addClassName-duration-easing-complete-complete\">\n<div><strong>complete<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Function\">Function<\/a>()<\/div>\n<div>A function to call once the animation is complete, called once per matched element.<\/div>\n<\/li>\n<\/ul>\n<\/li>\n<li class=\"signature\">\n<h4 class=\"name\"><a id=\"switchClass-removeClassName-addClassName-options\" href=\"#switchClass-removeClassName-addClassName-options\"><span class=\"icon-link\"><\/span>.switchClass( removeClassName, addClassName [, options ] )<\/a><\/h4>\n<ul>\n<li id=\"switchClass-removeClassName-addClassName-options-removeClassName\">\n<div><strong>removeClassName<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>One or more class names (space separated) to be removed from the class attribute of each matched element.<\/div>\n<\/li>\n<li id=\"switchClass-removeClassName-addClassName-options-addClassName\">\n<div><strong>addClassName<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>One or more class names (space separated) to be added to the class attribute of each matched element.<\/div>\n<\/li>\n<li id=\"switchClass-removeClassName-addClassName-options-options\">\n<div><strong>options<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Object\">Object<\/a>\n<\/div>\n<div>All animation settings. All properties are optional.<\/div>\n<ul>\n<li>\n<div>\n<strong>duration<\/strong> (default: <code>400<\/code>)<\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Number\">Number<\/a> or <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>A string or number determining how long the animation will run.<\/div>\n<\/li>\n<li>\n<div>\n<strong>easing<\/strong> (default: <code>swing<\/code>)<\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>A string indicating which <a href=\"\/1.12\/easings\/\">easing<\/a> function to use for the transition.<\/div>\n<\/li>\n<li>\n<div><strong>complete<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Function\">Function<\/a>()<\/div>\n<div>A function to call once the animation is complete, called once per matched element.<\/div>\n<\/li>\n<li>\n<div>\n<strong>children<\/strong> (default: <code>false<\/code>)<\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Boolean\">Boolean<\/a>\n<\/div>\n<div>Whether the animation should additionally be applied to all descendants of the matched elements. This feature should be used with caution as the cost of determining which descendants to animate can be very expensive, and grows linearly with the number of descendants.<\/div>\n<\/li>\n<li>\n<div>\n<strong>queue<\/strong> (default: <code>true<\/code>)<\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Boolean\">Boolean<\/a> or <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>A Boolean indicating whether to place the animation in the effects queue. If <code>false<\/code>, the animation will begin immediately. A string can also be provided, in which case the animation is added to the queue represented by that string.<\/div>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div class=\"longdesc\" id=\"entry-longdesc\">\n\t\t<p>The <code>.switchClass()<\/code> method allows you to animate the transition of adding and removing classes at the same time.<\/p>\n\t\t<div>\n\t<p>Similar to native CSS transitions, jQuery UI&apos;s class animations provide a smooth transition from one state to another while allowing you to keep all the details about which styles to change in CSS and out of your JavaScript. All class animation methods, including <code>.switchClass()<\/code>, support custom durations and easings, as well as provide a callback for when the animation completes.<\/p>\n\t<p>Not all styles can be animated. For example, there is no way to animate a background image. Any styles that cannot be animated will be changed at the end of the animation.<\/p>\n<\/div>\n\t<\/div>\n<section class=\"entry-examples\" id=\"entry-examples\"><header><h2>Example:<\/h2><\/header><div class=\"entry-example\" id=\"example-0\">\n<p>Adds the class &quot;blue&quot; and removes the class &quot;big&quot; from the matched elements.<\/p>\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n22\">22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n23\">23<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n24\">24<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n25\">25<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n26\">26<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n27\">27<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n28\">28<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n29\">29<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n30\">30<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n31\">31<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n32\">32<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n33\">33<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n34\">34<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n35\">35<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-meta\">&lt;!doctype <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">&quot;en&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">&quot;utf-8&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>switchClass demo<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">&quot;stylesheet&quot;<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;\/\/code.jquery.com\/ui\/1.12.1\/themes\/smoothness\/jquery-ui.css&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-selector-tag\">div<\/span> {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100px<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100px<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#ccc<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-selector-class\">.big<\/span> {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">200px<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">200px<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-selector-class\">.blue<\/span> {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#00f<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">&quot;\/\/code.jquery.com\/jquery-1.12.4.js&quot;<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">&quot;\/\/code.jquery.com\/ui\/1.12.1\/jquery-ui.js&quot;<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">&quot;big&quot;<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;div&quot;<\/span> ).click(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  $( <span class=\"hljs-built_in\">this<\/span> ).switchClass( <span class=\"hljs-string\">&quot;big&quot;<\/span>, <span class=\"hljs-string\">&quot;blue&quot;<\/span>, <span class=\"hljs-number\">1000<\/span>, <span class=\"hljs-string\">&quot;easeInOutQuad&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<h4>Demo:<\/h4>\n<div class=\"demo code-demo\" data-height=\"220\"><\/div>\n<\/div><\/section>\n<\/div><\/article>","protected":false},"excerpt":{"rendered":"<p>Adds and removes the specified class(es) to each of the set of matched elements while animating all style changes.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,10],"tags":[],"class_list":["post-132","post","type-post","status-publish","format-standard","hentry","category-effects","category-effects-core"],"_links":{"self":[{"href":"https:\/\/api.jqueryui.com\/1.12\/wp-json\/wp\/v2\/posts\/132","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/api.jqueryui.com\/1.12\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/api.jqueryui.com\/1.12\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/api.jqueryui.com\/1.12\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/api.jqueryui.com\/1.12\/wp-json\/wp\/v2\/comments?post=132"}],"version-history":[{"count":1,"href":"https:\/\/api.jqueryui.com\/1.12\/wp-json\/wp\/v2\/posts\/132\/revisions"}],"predecessor-version":[{"id":133,"href":"https:\/\/api.jqueryui.com\/1.12\/wp-json\/wp\/v2\/posts\/132\/revisions\/133"}],"wp:attachment":[{"href":"https:\/\/api.jqueryui.com\/1.12\/wp-json\/wp\/v2\/media?parent=132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/api.jqueryui.com\/1.12\/wp-json\/wp\/v2\/categories?post=132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/api.jqueryui.com\/1.12\/wp-json\/wp\/v2\/tags?post=132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}