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

Use fadeTo()

$('#window').fadeTo('fast', 1.0);

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!