jQuery animate（）没有动画backgroundColor rgba

Question

我有一个简单的代码，结构是这样的：

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

div a div div div中有div#imgholderframe div#imgholderlogo，如果有任何意义的话。

我想要的是<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> 的不透明度在悬停在#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; }

上时作为动画在600毫秒内发生变化

JSFiddle

HTML：

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

CSS：

{{1}}

的jQuery

{{1}}

JSFiddle

Answer 1

Mathias是正确的

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

你应该使用jQuery.Color（）插件。除非另有说明，否则属性值被视为多个像素。可以在适用的情况下指定单位em和％。

Answer 2

jQuery本身不会为颜色设置动画。

您可以使用jQuery UI，也可以使用本机CSS转换。您可以使用jQuery向元素添加一个类，并在CSS中指定background属性应该是动画的。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

看看这里：

http://jsfiddle.net/7LZmW/

.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -webkit-transition: background-color 600ms;
    transition: background-color 600ms;
 }

 .box:hover {
    background-color: #FFCCCC;
 }

Answer 3

根据我的理解，您已将背景图像调用到#imgholder，并且您想要更改div＃imgholderframe的不透明度。所以我认为，因为div＃imgholderframe是#imgholder的孩子，即使它正在改变不透明度，最终用户也看不到它。因此，尝试更改#imgholder的不透明度（并且您已在jquery中编写代码以更改不应起作用的背景颜色。）

你必须改变不透明度而不是#imgholder的背景颜色。请使用以下代码：

$("#imgholderlogo").mouseenter(function() {
    $(this).parent().parent().parent().parent().animate({"opacity": '0.4'},600);
});

$("#imgholderlogo").mouseleave(function() {
    $(this).parent().parent().parent().parent().animate({"opacity": '1'},600);
});

这可能有效。请将此代码放在脚本标记

中</body>之前的页面末尾