jQuery animate() 不动画背景颜色 rgba

Question

我有一个简单的代码，结构如下:

- div#imgholder
   - div#imgholderframe
      - div#bottombar
         - a
            - div#imgholderlogo

所以在 div 中的 a 中有一个 div in a div in a div，如果这有意义的话。

我想要的是，当鼠标悬停在 div#imgholderlogo 上时，div#imgholderframe 的不透明度会在 600 毫秒内以动画形式发生变化

JSFiddle

HTML:

<div id="imgholder">
    <div id="imgholderframe">
        <div id="bottombar">
            <a href="http://www.studio-2010.nl/" title="STUDIO 2010" target="_blank">
                <div id="imgholderlogo"></div>
            </a>
        </div>
    </div>
</div>

CSS:

#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;
}

jQuery

$("#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);
});

JSFiddle

Answer 1

马蒂亚斯是对的

https://api.jquery.com/animate/

您应该使用 jQuery.Color() 插件。除非另有说明，属性值被视为像素数。如果适用，可以指定单位 em 和 %。