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.
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
There is no way around this, unfortunately. At least, no tidy way.
See, #window is being set to 100% of #content's 70%.
The only way around this is to have #window not be inside #content, but rather afterward/on top of.
Just had a better/different idea.
If you can, set position: absolute on the #window. Make sure it doesn't cause problems with the flow, but if you do that then the opacity doesn't chain anymore.
Use fadeTo()
$('#window').fadeTo('fast', 1.0);
