Question

I’m using visibility: hidden; and visibility: visible; to show and hive divs, such as modals and other divs. I’d like to have a fade-in effect when clicking the <a> link to run the javascript to show and hide the divs, but I’d very strongly like to continue using the visibility element to toggle the div visibility. Is there a way to do this with HTML/CSS/JavaScript/jQuery?

Answer 1

in jQuery:

$('selector').fadeIn();

With CSS, use opacity: (this is 50%)

-moz-opacity:.50; 
filter:alpha(opacity=50); 
opacity:.50;

If you would like to do the fadeIn manually, adjust this opacity in steps, and when you reach the point of invisibilty, add display:none But if you use jQuery anyways, stick with fadeIn()

fadeIn() supports speed too, just add the milliseconds as first parameter. Look at the docs: http://api.jquery.com/fadeIn/

Want to keep the display property in css, use fadeTo(). It requires the opacity percentage: http://api.jquery.com/fadeto/

$(this).fadeTo("slow", 1); // 100% visible
$(this).fadeTo("slow", 0); // 0% visible aka hidden