[jQuery] IE6 fadeIn/fadeOut Problem (css prob?)

[jQuery] IE6 fadeIn/fadeOut Problem (css prob?)

Yesterday there was a discussion here about opacity in IE; Kelvin Luck
started the thread. You didn't show your markup, but the problem may be that
the inheritance of opacity isn't working the way you expect.
http://www.ozoneasylum.com/5561

-----Original Message-----
From: discuss-bounces@jquery.com [mailto:discuss-bounces@jquery.com] On
Behalf Of stargate
Sent: Saturday, December 09, 2006 4:48 AM
To: jQuery Discussion.
Subject: [jQuery] IE6 fadeIn/fadeOut Problem (css prob?)
Hello,
i have a problem with the fadeout/fadein function on IE with jquery.I'm not
really sure if this has something to do with jquery, but as far as i figured
out it all depends on the "filter: alpha(opacity=XX)" css style wich jquery
seems to set with the fadeout/fadein on the IE6.
My goal is like a left-pane wich slide's out and back in. To to this i
fadein and fadeout 2 different divs.
On IE when the panel is open (div #leftpanel) and i close it, all is fine
now, it fades correct out and the #left_pane_tab_swap is visible.
But when i change the state so the #leftpanel fade's in and the
#left_pane_tab_swap should fade out, then the #leftPanel is invisible.
On IE6 i have installed the DOM-Explorer plugin and when i remove the
filter: alpha(opacity=XX) css style it comes back visible or when i set it
so 99.99 In my JS-Function i've tried to set the css style manualy as you
see, but this didnt changed anything :(
On FF1.5/2.0 and Opera 9 all works fine this way right now.
So im asking for help what i maybe make wrong ??
Thx in advance for any hint/help.
Ralf
NOTE: i do use the actual 1.0.3 Version!!!
CSS and JS follows
----------------------
############## CSS START ################
#leftPanel { /* Styling the menu panel */
background-color:#6699CC;
text-align: left;
width: 220px; /* width incl. tab */
/* You shouldn't change these 5 options unless you need to */
height: 100%;
min-height: 100%;
max-height: 100%;
left: 0px;
top: 0px;
position:absolute;
display:block;
color: #fff;
font-size: 10px;
}
#leftPanel #logo {
margin: 40px 0 20px 0;
}
#left_pane_tab {
background: #fff url(../images/left_tab_bg.gif) repeat-y left top;
height: 100%;
width: 20px;
position: absolute;
left: 200px;
border: 0px;
}
#leftPanel #leftPanelContent{
width: 150px;
margin: 0px;
padding: 35px 0 0 21px; /* Need to use padding because of IE */
text-align: left;
line-height: 150%;
}
#leftPanel a:link,
#leftPanel a:visited {
color: #ffc;
text-decoration: none;
font-weight: bold;
}
#leftPanel a:hover,
#leftPanel a:active {
color: #ff3;
text-decoration: none;
font-weight: bold;
}
#left_pane_tab_swap{
background: #fff url(../images/left_tab_bg.gif) repeat-y left top;
height: 100%;
width: 20px;
position: absolute;
top: 0px;
}
############## CSS END ################
########## JS-Function ############
function SlideLeft(){
if($("#left_pane_tab_swap").css("display") == "none"){
$("#leftPanel").fadeOut();
$("#leftPanel").css("display","none");
$("#left_pane_tab_swap").fadeIn();
$("#main").css("margin","0 0 0 20px");
$("#left_pane_tab_swap").css("filter","alpha(opacity=0)");
Set_Cookie('lp',0,100000);
} else {
$("#left_pane_tab_swap").fadeOut();
$("#leftPanel").fadeIn();
$("#leftPanel").css("display","block");
$("#main").css("margin","0 0 0 225px");
$("#left_pane_tab_swap").css("filter","alpha(opacity=99.99)");
Set_Cookie('lp',1,100000);
}
}
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/