Question

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 1

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