4

Possible Duplicate:
jQuery + RGBA color animations

hey,

i want to change the opacity of an rgba value on hover, but the opacity stays at .07.. maybe ou can help me find the mistake.

CSS (IE hacks are in seperate file - no need to mention them here)

.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);
});
Community
  • 1
  • 1
tobiasmay
  • 197
  • 1
  • 2
  • 14

2 Answers2

1

I get the feeling (untested guess) that jQuery is not checking the CSS background property for rbga(...) and thus not applying a hack fix to change the filter:alpha().

I think you'll need to change opacity:1 separately.

.animate({top:0,height:"230px",background:'rgb(255, 144, 11)',opacity:1}, 350);
scunliffe
  • 62,582
  • 25
  • 126
  • 161
  • sadly this doesn't work.. but maybe i can go by removing the rgba value since i have a rgb value for fallback? – tobiasmay Nov 16 '10 at 13:56
  • does adding `zoom:1` or `display:inline-block` to the css help? I'm wondering if there is an issue due to the element not having "hasLayout" in IE? – scunliffe Nov 16 '10 at 15:45
  • i'm testing on FF3.6. IE gets triggered via conditional comments and has a zoom:1 aswell as Filters for the opacity hack since i need type with full opacity over the transparent div. – tobiasmay Nov 16 '10 at 16:18
-5

the jquery color plugin doesn't support rgba. use this instead: link text

Daniel Node.js
  • 6,734
  • 9
  • 35
  • 57