I'm having a hard time getting jquery fades and the opacity css element to respond to me in a firefox extension that I am writing. I am using FireFox 3.6. I'm pretty sure that these two problems are related.
This code is not fading, it is simply popping on and off the screen after a four second wait:
css_notify_div = {
position: 'fixed',
top: '2%',
right: '2%',
font: 'bold',
'font-size': '1.5em',
'font-family': 'sans-serif',
'text-align': 'center',
'background-color': 'ffff88',
'border': '2px solid #eeee00',
'padding': '5px',
margin: 'auto',
display: 'none'
};
doc = window.content.document;
$('#br_notify_div', doc).css(css_notify_div);
$('#br_notify_div', doc).fadeIn("slow", function () {
$('#br_notify_div', doc).fadeOut(4000);
});
fadeTo() also fails every time I run it, and if I use css({opacity:'.2'}) then nothing happens either.
Edit: This appears to be specific to a firefox extension environment. The other animations work fine, show('slow') for instance looks just fine. This appears to be related to using the opacity property itself, it doesn't seem to be just a jQuery issue.