{"id":70,"date":"2023-08-25T18:59:13","date_gmt":"2023-08-25T18:59:13","guid":{"rendered":"\/\/jqueryui.com\/?page_id=70"},"modified":"2024-04-26T16:40:36","modified_gmt":"2024-04-26T16:40:36","slug":"switchClass","status":"publish","type":"page","link":"https:\/\/jqueryui.com\/switchClass\/","title":{"rendered":"Switch Class"},"content":{"rendered":"<p class=\"desc\">Add and remove class(es) to elements while animating all style changes.<\/p>\n\n<div class=\"demo-list\" data-full-nav=\"true\"><h2>Examples<\/h2><ul><li><a href=\"\/resources\/demos\/effect\/default.html\">Effect demo<\/a><\/li><li><a href=\"\/resources\/demos\/effect\/addClass.html\">addClass demo<\/a><\/li><li><a href=\"\/resources\/demos\/effect\/animate.html\">Animate demo<\/a><\/li><li><a href=\"\/resources\/demos\/effect\/easing.html\">Easing demo<\/a><\/li><li><a href=\"\/resources\/demos\/effect\/hide.html\">Hide Demo<\/a><\/li><li><a href=\"\/resources\/demos\/effect\/removeClass.html\">removeClass Demo<\/a><\/li><li><a href=\"\/resources\/demos\/effect\/show.html\">Show Demo<\/a><\/li><li class=\"active\"><a href=\"\/resources\/demos\/effect\/switchClass.html\">switchClass Demo<\/a><\/li><li><a href=\"\/resources\/demos\/effect\/toggle.html\">Toggle Demo<\/a><\/li><li><a href=\"\/resources\/demos\/effect\/toggleClass.html\">toggleClass Demo<\/a><\/li><\/ul><\/div><iframe src=\"\/resources\/demos\/effect\/switchClass.html\" class=\"demo-frame\"><\/iframe><div class=\"demo-description\">\n<p>Click the button above to preview the effect.<\/p>\n<\/div><div class=\"view-source\"><a tabindex=\"0\"><i class=\"icon-eye-open\"><\/i> view source<\/a><div><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\t\t<div class=\"line n36\">36<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n37\">37<\/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><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span><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\">\"utf-8\"<\/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\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1\"<\/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>jQuery UI Effects - 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\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/code.jquery.com\/ui\/1.14.2\/themes\/base\/jquery-ui.css\"<\/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\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"\/resources\/demos\/style.css\"<\/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-class\">.toggler<\/span> { <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">500px<\/span>; <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">200px<\/span>; <span class=\"hljs-attribute\">position<\/span>: relative; }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-selector-id\">#button<\/span> { <span class=\"hljs-attribute\">padding<\/span>: .<span class=\"hljs-number\">5em<\/span> <span class=\"hljs-number\">1em<\/span>; <span class=\"hljs-attribute\">text-decoration<\/span>: none; }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-selector-id\">#effect<\/span> { <span class=\"hljs-attribute\">position<\/span>: relative; }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-selector-class\">.newClass<\/span> { <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">240px<\/span>;  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">1em<\/span>; <span class=\"hljs-attribute\">letter-spacing<\/span>: <span class=\"hljs-number\">0<\/span>; <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span>; }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-selector-class\">.anotherNewClass<\/span> { <span class=\"hljs-attribute\">text-indent<\/span>: <span class=\"hljs-number\">40px<\/span>; <span class=\"hljs-attribute\">letter-spacing<\/span>: .<span class=\"hljs-number\">2em<\/span>; <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">410px<\/span>; <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100px<\/span>; <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">30px<\/span>; <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">10px<\/span>; <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1.1em<\/span>; }<\/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\">\"https:\/\/code.jquery.com\/jquery-3.7.1.js\"<\/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\">\"https:\/\/code.jquery.com\/ui\/1.14.2\/jquery-ui.js\"<\/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>&gt;<\/span><span class=\"javascript\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  $( <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-string\">\"#button\"<\/span> ).on( <span class=\"hljs-string\">\"click\"<\/span>, <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-string\">\".newClass\"<\/span> ).switchClass( <span class=\"hljs-string\">\"newClass\"<\/span>, <span class=\"hljs-string\">\"anotherNewClass\"<\/span>, <span class=\"hljs-number\">1000<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      $( <span class=\"hljs-string\">\".anotherNewClass\"<\/span> ).switchClass( <span class=\"hljs-string\">\"anotherNewClass\"<\/span>, <span class=\"hljs-string\">\"newClass\"<\/span>, <span class=\"hljs-number\">1000<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    });<\/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><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\">\"toggler\"<\/span>&gt;<\/span><\/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\">id<\/span>=<span class=\"hljs-string\">\"effect\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"newClass ui-corner-all\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"button\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"ui-state-default ui-corner-all\"<\/span>&gt;<\/span>Run Effect<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/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><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<\/div><\/div>\n\n<p>Want to learn more about the <code>.switchClass()<\/code> method? Check out\nthe <a href=\"https:\/\/api.jqueryui.com\/switchClass\/\">API documentation<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Add and remove class(es) to elements while animating all style changes. ExamplesEffect demoaddClass demoAnimate demoEasing demoHide DemoremoveClass DemoShow DemoswitchClass DemoToggle DemotoggleClass Demo Click the button above to preview the effect. view source 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 &hellip; <a href=\"https:\/\/jqueryui.com\/switchClass\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-70","page","type-page","status-publish","hentry","category-effects"],"_links":{"self":[{"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/pages\/70","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/comments?post=70"}],"version-history":[{"count":2,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/pages\/70\/revisions"}],"predecessor-version":[{"id":346,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/pages\/70\/revisions\/346"}],"wp:attachment":[{"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/media?parent=70"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/categories?post=70"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/tags?post=70"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}