title: Animate a Div Background - CSS or jQuery
body: <p>I have a highly optimized page for imaging and some very graphic effects.</p>
  
  <p>I have something I've been trying to do for awhile, and can't find a clear cut answer.</p>
  
  <p><strong>I want to animate a css background property via jQuery with the same speed as the internal animation (500)</strong></p>
  
  <p><em>Keep in mind, my other animation is imaged based, for good reason with what I'm implementing</em></p>
  
  <p>Can I edit the background property of the whole div (as seen on live site) at an animation rate of 500?</p>
  
  <p><a href="http://www.sinsysonline.com/design/index.html" rel="nofollow"><a href="http://www.sinsysonline.com/design/index.html" rel="nofollow">http://www.sinsysonline.com/design/index.html</a></a></p>
  
  <p>jQuery</p>
  
  <pre><code>&lt;script type='text/javascript'&gt;
  
  $(document).ready(function(){
  $(".feat3col").hover(
  function() {
  
  $(this).find('img.a').stop().animate({"opacity": "0"}, "fast");
  $(this).css('background', '#000');
  },
  function() {
  
  $(this).find('img.a').stop().animate({"opacity": "1"}, "slow");
  $(this).css('background', '#FFF');
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="http://www.sinsysonline.com/design/index.html" rel="nofollow"><a href="http://www.sinsysonline.com/design/index.html" rel="nofollow">http://www.sinsysonline.com/design/index.html</a></a>
  <br />Markup:</p>
  
  <pre><code>&lt;div class="featured"&gt;
              &lt;div class="feat3col"&gt;
              &lt;h2&gt;Packages&lt;/h2&gt;
                  &lt;div class="imgGlow"&gt;
                      &lt;img class="a" width:"200px" height:"300px" src="images/filler_200x300.jpg" alt="test" /&gt;
                      &lt;img class="b" width:"200px" height:"300px" src="images/filler_200x3002.jpg" alt="test" /&gt;
                  &lt;/div&gt;
              &lt;p&gt;This should extend roughly 5-7 lines. It is simply filler for development purposes. Ignore this statement, and the link below.&lt;/p&gt;
              &lt;a href="#" class="botCap"&gt;Link Link&lt;/a&gt;
          &lt;/div&gt;
              &lt;div class="feat3col"&gt;
              &lt;h2&gt;Reviews&lt;/h2&gt;
  
                  &lt;div class="imgGlow"&gt;
                      &lt;img class="a" width:"200px" height:"300px" src="images/filler_200x300.jpg" alt="test" /&gt;
                      &lt;img class="b" width:"200px" height:"300px" src="images/filler_200x3002.jpg" alt="test" /&gt;
                  &lt;/div&gt;
  
              &lt;p&gt;This should extend roughly 5-7 lines. It is simply filler for development purposes. Ignore this statement, and the link below. Make more content!&lt;/p&gt;
              &lt;a href="#" class="botCap"&gt;Link Link&lt;/a&gt;
  
              &lt;/div&gt;
              &lt;div class="feat3col"&gt;
              &lt;h2&gt;About&lt;/h2&gt;
  
                  &lt;div class="imgGlow"&gt;
                      &lt;img class="a" width:"200px" height:"300px" src="images/filler_200x300.jpg" alt="test" /&gt;
                      &lt;img class="b" width:"200px" height:"300px" src="images/filler_200x3002.jpg" alt="test" /&gt;
                  &lt;/div&gt;
  
              &lt;p&gt;This should extend roughly 5-7 lines. It is simply filler for development purposes. Ignore this statement, and the link below. Yet again, these are simply use case scenarios to display different heights and how it still works.&lt;/p&gt;
              &lt;a href="#" class="botCap"&gt;Link Link&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://www.sinsysonline.com/design/index.html" rel="nofollow"><a href="http://www.sinsysonline.com/design/index.html" rel="nofollow">http://www.sinsysonline.com/design/index.html</a></a></p>
  
  <p>Keep in mind, if this is a noob question, I've made some sick sites, but had to use plugins. Doing this section 100% solo with my own development. The reason I need to accomplish this in pair with the image is because if I enable transparency on the image it becomes 50kb or so (vs 2-7kb), with optimization and fades, blah blah. I want to be able to utilize this image to make some actual graphic design with a fade, and the whole div to match the background as it fades.</p>