jQuery animate（）不设置背景颜色rgba的动画

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

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

所以在

a

中有一个

div

在

div

中有一个

div

在

div

中，如果这有意义的话

我想要的是

div#imgholderframe

的不透明度在600毫秒内变化，当鼠标悬停在

div#imgholderlogo

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>

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

---

jQuery本身不会设置颜色动画

您可以使用jqueryui，也可以使用原生CSS转换。您可以使用jQuery向元素添加一个类，并在CSS中指定后台属性应设置动画

请看这里：

---

jQuery本身不会设置颜色的动画

您可以使用jqueryui，也可以使用原生CSS转换。您可以使用jQuery向元素添加一个类，并在CSS中指定后台属性应设置动画

请看这里：

马西亚斯是对的

您应该使用jQuery.Color（）插件。除非另有规定，否则特性值将被视为像素数。在适用的情况下，可以指定单位em和%。

Mathias是正确的

---

您应该使用jQuery.Color（）插件。除非另有规定，否则特性值将被视为像素数。可以在适用的情况下指定单位em和%。

根据我的理解，您已将背景图像调用为#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);
});

---

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

之前，根据我的理解，您已将背景图像调用为#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);
});

---

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

之前的页面末尾。这不对，这里有一把小提琴。对我来说，它似乎不起作用。@DaanHeskes没有jQuery UI的jQuery不会设置颜色的动画。好吧，我想我可以明确地说，jQuery UI会设置动画，但只有jQuery不会。我希望这仍然是一个有用的解决方案。那是我的错，没有注意到它被打开了。那不对，这里有一把小提琴，它确实发生了。对我来说，它似乎不起作用。@DaanHeskes没有jQuery UI的jQuery不会设置颜色的动画。好吧，我想我可以明确地说，jQuery UI会设置动画，但只有jQuery不会。我希望这仍然是一个有用的解决办法。那是我的错，没有注意到已打开。您没有使用jquery ui，并且您有图像背景，并且您正在用白色背景更改白色背景。您没有使用jquery ui，并且您有图像背景，并且您正在用白色背景更改白色背景。回答得很好，说得很清楚。我学到了一些东西，现在我正在制作一个不同的动画。很好的回答，让事情变得清晰。我学到了一些东西，现在我正在制作一个不同的动画。