{"id":10,"date":"2023-08-25T18:58:58","date_gmt":"2023-08-25T18:58:58","guid":{"rendered":"\/\/jqueryui.com\/?page_id=10"},"modified":"2023-08-25T18:58:58","modified_gmt":"2023-08-25T18:58:58","slug":"animate","status":"publish","type":"page","link":"https:\/\/jqueryui.com\/animate\/","title":{"rendered":"Color Animation"},"content":{"rendered":"<p class=\"desc\">Animate the properties of elements between colors.<\/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 class=\"active\"><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><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\/animate.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\t\t<div class=\"line n38\">38<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n39\">39<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n40\">40<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n41\">41<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n42\">42<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n43\">43<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n44\">44<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n45\">45<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n46\">46<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n47\">47<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n48\">48<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n49\">49<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n50\">50<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n51\">51<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n52\">52<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n53\">53<\/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 - Animate 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\">width<\/span>: <span class=\"hljs-number\">240px<\/span>; <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">170px<\/span>; <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0.4em<\/span>; <span class=\"hljs-attribute\">position<\/span>: relative; <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#fff<\/span>; }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-selector-id\">#effect<\/span> <span class=\"hljs-selector-tag\">h3<\/span> { <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span>; <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0.4em<\/span>; <span class=\"hljs-attribute\">text-align<\/span>: center; }<\/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-keyword\">var<\/span> state = <span class=\"hljs-literal\">true<\/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-keyword\">if<\/span> ( state ) {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        $( <span class=\"hljs-string\">\"#effect\"<\/span> ).animate({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-attr\">backgroundColor<\/span>: <span class=\"hljs-string\">\"#aa0000\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-attr\">color<\/span>: <span class=\"hljs-string\">\"#fff\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">500<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        }, <span class=\"hljs-number\">1000<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      } <span class=\"hljs-keyword\">else<\/span> {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        $( <span class=\"hljs-string\">\"#effect\"<\/span> ).animate({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-attr\">backgroundColor<\/span>: <span class=\"hljs-string\">\"#fff\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-attr\">color<\/span>: <span class=\"hljs-string\">\"#000\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">240<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        }, <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>      state = !state;<\/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\">\"ui-widget-content ui-corner-all\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"ui-widget-header ui-corner-all\"<\/span>&gt;<\/span>Animate<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/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. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/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\">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\">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>Toggle 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>jQuery UI bundles the jQuery Color plugins which provides color animations as\nwell as many utility functions for working with colors.<\/p>\n\n<p>Want to learn more about color animations? Check out the\n<a href=\"https:\/\/github.com\/jquery\/jquery-color\/\">jQuery Color documentation<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Animate the properties of elements between colors. 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 24 25 26 27 &hellip; <a href=\"https:\/\/jqueryui.com\/animate\/\">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-10","page","type-page","status-publish","hentry","category-effects"],"_links":{"self":[{"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/pages\/10","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=10"}],"version-history":[{"count":1,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":11,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/pages\/10\/revisions\/11"}],"wp:attachment":[{"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/media?parent=10"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/categories?post=10"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/tags?post=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}