opacity

I'm trying to fade the top part of my content as it reaches a fixed nav bar with a translucent background. I've got it somewhat working, but you'll see 2 problems: All the content fades out, not just what's approaching the fixed nav. Content should fade at a line by line rate. All the content for all the other divs fade about because of the selector class. I'd appreciate any help! Thanks var divs = $('.section').children(); $(window).on('scroll', function() { var st = $(this).scrollTop(); divs.css({ 'opacity' : (1 - st/20) }); }); JS Fiddle so far: http://jsfiddle.net/x5JKC/ I changed a bit

I want to produce an opaque solid color with 2 opacity values of that color. eg: 0.5 opacity black color rectangle when placed above same 0.5 opacity black color doesn't give me same result as an opaque (opacity 1) black color. I have tried this with different range of opacity values and found something like 0.5 & 0.8 produce 0.9 opacity black color, 0.4 & 0.82 and so on. These are not accurate values. What is the exact formula for calculating exactly opposite opacity values? If two elements with opacity 1-a and 1-b are stacked on top of each other, their combined opacity will be 1-a*b , so

I'm trying to set up an image within a div that will slowly appear (opacity from 0 to 1) over 5 seconds. I have this code: .fadeDivIn { opacity: 1; transition: opacity 5s ease-in; -moz-transition: opacity 5s ease-in; -webkit-transition: opacity 5s ease-in; -o-transition: opacity 5s ease-in; } but I can't figure out how to trigger it automatically. I've been doing transitions to other elements with CSS3 keyframes and would ideally like to apply something similar to opacity but have hit a brick wall. Can anyone help please? http://jsfiddle.net/DerekL/9PfMF/ div{ -webkit-animation: fadein 5s