[Summary view] [Print] [Text view]

   1  <p><a href="http://docs.jquery.com/UI" title="UI">&laquo; Back to the jQuery UI Docs</a>
   2  </p><p>The jQuery UI effects core extends the animate function to be able to animate colors as well. It's heavily used by the class transition feature and it's able to color animate the following properties:
   3  </p>
   4  <ul><li> <b>backgroundColor</b>
   5  </li><li> <b>borderBottomColor</b>
   6  </li><li> <b>borderLeftColor</b>
   7  </li><li> <b>borderRightColor</b>
   8  </li><li> <b>borderTopColor</b>
   9  </li><li> <b>color</b>
  10  </li><li> <b>outlineColor</b>
  11  </li></ul>
  12  <p>with one of the following combinations:
  13  </p>
  14  <ul><li> <b>hex (#FF0000)</b>
  15  </li><li> <b>rgb (rgb(255,255,255))</b>
  16  </li><li> <b>names ("black")</b>
  17  </li></ul>
  18  <p><br />
  19  </p><p><div class="options list"><table class="options examples" cellspacing="0"><thead><tr><th>Name</th><th>Type</th></tr></thead><tbody>
  20  </table><b class="options">Example:</b><table class="options examples" cellspacing="0"><thead><tr><th>Name</th><th>Type</th></tr></thead><tbody>
  21  <div class="example">
  22  <ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
  23  <div id="demo" class="tabs-container" rel="125">
  24  A simple color animation.<br />
  25  </p>
  26  <pre>$(&quot;.block&quot;).<a href="http://docs.jquery.com/Events/toggle" title="Events/toggle">toggle</a>(function() {
  27      $(this).<a href="http://docs.jquery.com/Effects/animate" title="Effects/animate">animate</a>({ backgroundColor: &quot;black&quot; }, 1000);
  28  },function() {
  29      $(this).<a href="http://docs.jquery.com/Effects/animate" title="Effects/animate">animate</a>({ backgroundColor: &quot;#68BFEF&quot; }, 500);
  30  });
  31  
  32  </pre>
  33  <p></div><div id="source" class="tabs-container">
  34  </p>
  35  <pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  36                      "<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>"&gt;
  37  &lt;html&gt;
  38  &lt;head&gt;
  39    &lt;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>"&gt;&lt;/script&gt;
  40    
  41    &lt;script src=&quot;http://ui.jquery.com/latest/ui/effects.core.js&quot;&gt;&lt;/script&gt;
  42  
  43    &lt;script&gt;
  44    $(document).ready(function(){
  45      $(&quot;.block&quot;).<a href="http://docs.jquery.com/Events/toggle" title="Events/toggle">toggle</a>(function() {
  46      $(this).<a href="http://docs.jquery.com/Effects/animate" title="Effects/animate">animate</a>({ backgroundColor: &quot;black&quot; }, 1000);
  47  },function() {
  48      $(this).<a href="http://docs.jquery.com/Effects/animate" title="Effects/animate">animate</a>({ backgroundColor: &quot;#68BFEF&quot; }, 500);
  49  });
  50  
  51    });
  52    &lt;/script&gt;
  53    &lt;style&gt;
  54    .block { 
  55      color: white;
  56      background-color: #68BFEF;
  57      width: 150px; 
  58      height: 70px;
  59      margin: 10px; 
  60    }
  61    &lt;/style&gt;
  62  &lt;/head&gt;
  63  &lt;body&gt;
  64    &lt;div class=&quot;block&quot;&gt; Click me&lt;/div&gt;
  65  &lt;/body&gt;
  66  &lt;/html&gt;
  67  </pre>
  68  <p></div>
  69  </p><p></div>
  70  </p><p></tbody></table></div>
  71  </p><!-- 
  72  Pre-expand include size: 3730 bytes
  73  Post-expand include size: 5382 bytes
  74  Template argument size: 3450 bytes
  75  Maximum: 2097152 bytes
  76  -->
  77  
  78  <!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3094-1!1!0!!en!2 and timestamp 20090603192313 -->