[jQuery] jQuery Opacity functions doing strange things to 1px semi-transparent png background
I have a div with a 1px semi-transparent png background on a page in
IE8 (rendering as IE7). Every time I use .css("opacity") or .animate
({"opacity"}) on any element on the page, the div's background becomes
a gradient that fades away to being fully transparent at the end of
both it's x and y axes. This occurs regardless if the div is a child
of the element the jQuery is applied to, or it is not a child.
Viewing the source of the rendered page reveals nothing out of the
ordinary.
If I give the div a background colour and use CSS to apply the
transparency, and I change an element's opacity, then the background
of the div is opaque. However, if the div isn't a child of the opacity
changed element, then it works fine.
Looking at other posts about opacity problems, I couldn't find one
that matched this issue (though given the huge number of them, there's
probably at least one somewhere).
How can I avoid this gradient effect being applied?
jQuery code with offending lines commented out:
function button2_click(event)
{
$(".siot-slide").css("visibility","hidden");
$("#siot-image2").css("visibility","visible");
/*$("#siot-image2").css("opacity","0");
$("#siot-image2").animate({"opacity":1},300, "linear", null);*/
$("ul.siot-buttons li").removeClass("siot-active");
$("#siot-home-leftmenu").removeClass("siot-home-leftmenu-inactive");
/*$("#siot-image2").animate({"opacity":1},300, "linear", null);*/
$("#siot-button2").addClass("siot-active");
clearTimeout(timer);
timer = setTimeout(eval("button3_click"),"8000");
/*$("#siot-image2").animate({"opacity":1},300, "linear", null);*/
}