使用jQuery更改RGBA透明度

Question

可能是重复问题：
jQuery + RGBA color animations

嘿，

我想在悬停时改变rgba值的不透明度，但是不透明度保持为0.07。也许你可以帮我找到错误。

CSS（IE hacks在单独的文件中 - 不需要在此处提及）

.boxcaption{
   float: left;
   position: absolute;
   height: 100px;
   width: 100%;
   background: rgb(255, 144, 11);
   background: rgba(255, 144, 11, 0.7);
}

JS

var thumbslide = $('.boxgrid.captionfull').click(function() {
    $('.boxgrid.captionfull.clicked').removeClass('clicked').children('.cover').stop().animate({top: 230, background: 'rgba(255, 144, 11, 0.7)'}, 350);
    $(this).toggleClass('clicked').children('.cover').stop().animate({top: 0, height:"230px", background: 'rgba(255, 144, 11, 1)'}, 350);
});

- tobiasmay

Answer 1

我有一种感觉（未经测试的猜测），jQuery没有检查CSS背景属性中的rbga(...)，因此没有应用修复程序来更改filter:alpha()。

我认为你需要单独更改opacity:1。

.animate({top:0,height:"230px",background:'rgb(255, 144, 11)',opacity:1}, 350);

- scunliffe

---

很遗憾，这个方法不起作用。但是也许我可以通过删除rgba值来实现，因为我有一个rgb值作为备选方案？ - tobiasmay

将 zoom:1 或 display:inline-block 添加到 CSS 中是否有帮助？我在想这个元素是否因为在 IE 中没有 "hasLayout" 而出现了问题？ - scunliffe

我正在测试FF3.6。IE通过条件注释被触发，并且还使用了zoom:1以及Filters来实现不透明度的hack，因为我需要在透明的div上显示完全不透明的文本。 - tobiasmay

Answer 2

JQuery的颜色插件不支持RGBA。请使用此代替：链接文本

- Daniel Node.js

---

谢谢提供链接。评论中有一个有用的链接：http://pioupioum.fr/sandbox/jquery-color/。 - tobiasmay

该链接需要登录。 - Gazillion

链接的资源已损坏。 - Iguananaut

由于链接需要登录，因此此答案无用。-1 - Armin

抱歉，以前不需要它。 - Daniel Node.js