CARVIEW

MOTORHOMES

Select Language

HTTP/2 301 date: Fri, 26 Dec 2025 13:17:35 GMT content-type: text/html; charset=UTF-8 location: https://jqueryui.com/animate/ server: cloudflare cache-control: public, max-age=14400 x-powered-by: PHP/8.2.29 vary: X-Forwarded-Proto, accept-encoding reporting-endpoints: csp-endpoint="https://csp-report-api.openjs-foundation.workers.dev/" content-security-policy: default-src 'self'; script-src 'self' code.jquery.com download.jqueryui.com; style-src 'self' 'unsafe-inline' code.jquery.com download.jqueryui.com; style-src-attr 'unsafe-inline'; img-src 'self' data: code.jquery.com download.jqueryui.com; connect-src 'self' typesense.jquery.com; font-src 'self' data:; object-src 'none'; frame-ancestors 'none'; base-uri 'self'; block-all-mixed-content ; report-to csp-endpoint; report-uri https://csp-report-api.openjs-foundation.workers.dev/; form-action 'self' download.jqueryui.com; x-redirect-by: WordPress cf-cache-status: MISS expires: Fri, 26 Dec 2025 17:17:35 GMT cf-ray: 9b40dbf4ead3c177-BLR HTTP/2 200 date: Fri, 26 Dec 2025 13:17:36 GMT content-type: text/html; charset=UTF-8 server: cloudflare cache-control: public, max-age=14400 vary: Accept-Encoding vary: X-Forwarded-Proto x-powered-by: PHP/8.2.29 reporting-endpoints: csp-endpoint="https://csp-report-api.openjs-foundation.workers.dev/" content-security-policy: default-src 'self'; script-src 'self' code.jquery.com download.jqueryui.com; style-src 'self' 'unsafe-inline' code.jquery.com download.jqueryui.com; style-src-attr 'unsafe-inline'; img-src 'self' data: code.jquery.com download.jqueryui.com; connect-src 'self' typesense.jquery.com; font-src 'self' data:; object-src 'none'; frame-ancestors 'none'; base-uri 'self'; block-all-mixed-content ; report-to csp-endpoint; report-uri https://csp-report-api.openjs-foundation.workers.dev/; form-action 'self' download.jqueryui.com; link: ; rel="https://api.w.org/" link: ; rel="alternate"; title="JSON"; type="application/json" content-encoding: gzip cf-cache-status: BYPASS expires: Fri, 26 Dec 2025 17:17:36 GMT cf-ray: 9b40dbfa3f0fc177-BLR Color Animation | jQuery UI

jQuery UI

Color Animation

Animate the properties of elements between colors.

Examples

Click the button above to preview the effect.

view source

	
		
				
				
				
				
					<!DOCTYPE html><html lang="en"><head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Effects - Animate demo</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
    .toggler { width: 500px; height: 200px; position: relative; }
    #button { padding: .5em 1em; text-decoration: none; }
    #effect { width: 240px; height: 170px; padding: 0.4em; position: relative; background: #fff; }
    #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
  <script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var state = true;
    $( "#button" ).on( "click", function() {
      if ( state ) {
        $( "#effect" ).animate({
          backgroundColor: "#aa0000",
          color: "#fff",
          width: 500
        }, 1000 );
      } else {
        $( "#effect" ).animate({
          backgroundColor: "#fff",
          color: "#000",
          width: 240
        }, 1000 );
      }
      state = !state;
    });
  } );
  </script>
</head>
<body>
 
<div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">Animate</h3>
    <p>
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
    </p>
  </div>
</div>
 
<button id="button" class="ui-state-default ui-corner-all">Toggle Effect</button>
 
 
 
 
</body></html>

				
			

	

jQuery UI bundles the jQuery Color plugins which provides color animations as well as many utility functions for working with colors.

Want to learn more about color animations? Check out the jQuery Color documentation.

Original Source | Taken Source