title: jQuery animate() not animating backgroundColor rgba
body: <p>I have a simple code and the structure is like this:</p>
  
  <pre><code>- div#imgholder
     - div#imgholderframe
        - div#bottombar
           - a
              - div#imgholderlogo
  </code></pre>
  
  <p>So there is a <code>div</code> in an <code>a</code> in a <code>div</code> in a <code>div</code> in a <code>div</code>, if that makes any sense.</p>
  
  <p>What I want is that <code>div#imgholderframe</code>'s opacity changes in 600 ms as an animation when hovering over <code>div#imgholderlogo</code></p>
  
  <p><a href="http://jsfiddle.net/kaj4C/" rel="nofollow">JSFiddle</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="imgholder"&gt;
      &lt;div id="imgholderframe"&gt;
          &lt;div id="bottombar"&gt;
              &lt;a href="http://www.studio-2010.nl/" title="STUDIO 2010" target="_blank"&gt;
                  &lt;div id="imgholderlogo"&gt;&lt;/div&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#imgholder {
      position:relative;
      width:960px;
      height:380px;
      overflow:hidden;
      background: url("http://s27.postimg.org/n2de00amb/bsl2.jpg") no-repeat;
  
  }
  
  #imgholderframe {
      background-color: rgba(255,255,255,0);
      width:inherit;
      height:inherit;
  }
  
  #bottombar {
      position:absolute;
      bottom:0;
      left:0;
      width:100%;
      height:55px;
  }
  
  #imgholderlogo {
     position:absolute; 
     background: url("http://s30.postimg.org/6weqohsrl/studio2010logo.jpg") no-repeat;
     background-size:100% 100%;
     margin-top:15px;
     width:258px;
     height:55.6px;
     right:0px;
     transition:margin-top .6s;
     opacity:1;
  }
  
  #imgholderlogo:hover {   
     margin-top:0px;
  }
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$("#imgholderlogo").mouseenter(function() {
      $(this).parent().parent().parent().parent().animate({backgroundColor: 'rgba(255,255,255,0.4)'},600);
  });
  
  $("#imgholderlogo").mouseleave(function() {
      $(this).parent().parent().parent().parent().animate({backgroundColor: 'rgba(255,255,255,0)'},600);
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/kaj4C/" rel="nofollow">JSFiddle</a></p>