April 7, 2012
jQuery CSS opacity overriding
Question by higfox
I’m trying to create a popup for which I am using jQuery’s CSS function.Here’s the code:
function Show_Popup(action, userid) {
$('#content').css("opacity","0.7");
$('#window').fadeIn('fast');
$('#window').css("opacity","1.0");}
Here #window is inside #content.Hence when it “fades in”,its opacity is also set to 0.7,which I am trying to override via the 3rd line of code.But its not working.Any way around this?Thanks.
Answer by mightyuhu
use
$('#content').css("opacity","0.7");
$('#window').fadeIn('slow', function() {
$('#window').css("opacity","1.0");}
});
also you might want to consider $.animate() if thats what you’re looking for.
Remember: CSS-Opacity is chaining. So even if #window has an opacity of 100% its only a 100% from the 70% opacity of its parent..
See http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/ for a hackish workaround
Answer by Starx
