title: jQuery Animate() and BackgroundColor
body: <p>I'm trying to create a simple pulse effect by changing the background color using JQuery. However, I can't get the backgroundColor to animate.</p>
  
  <pre><code>function show_user(dnid) {
      /* dnid is HTML ID of a div. */
      if (! $(dnid).is(':visible')) {
          $(dnid).show()
      }
      $('html, body').animate({scrollTop: $(dnid).offset().top});
      $(dnid).animate({backgroundColor: "#db1a35"}, 1200);
  }
  </code></pre>
  
  <p>What's strange is that this alternate animation works:</p>
  
  <pre><code>$(dnid).animate({opacity: "toggle"}, 1200);
  </code></pre>
  
  <p>But it's not what I want at all.</p>
  
  <p>Additionally the show() and scroll functionality in the function work fine. It's just the background color animation that doesn't.</p>
  
  <p>The function above is called by this link
      <code>&lt;a href="#" onclick="javascript:show_user('#9e4cde88b90004ea722e9e129ed83747')"&gt;Locate Me&lt;/a&gt;</code></p>
  
  <p>Could someone help me animate the background color?</p>
  
  <p>=========</p>
  
  <p>Thanks everyone for the help. Lots of similar answers. Here's what I ended up with</p>
  
  <p>In my header</p>
  
  <p><code>&lt;script src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"&gt;&lt;/script&gt;</code></p>
  
  <p>Then in my show_user function right after the scroll animation.</p>
  
  <pre><code>var bgcol = $(dnid).css('backgroundColor');
  $(dnid).animate({backgroundColor: "#db1a35"}, 2000);
  $(dnid).animate({backgroundColor: bgcol}, 2000);
  </code></pre>
  
  <p>That gives a relatively quick red "pulse" that will draw the user's eyes.</p>
  
  <p>Again, thanks for the help.</p>