tkbx tkbx - 5 months ago 28
Javascript Question

Fade in with CSS visibility: visible?

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

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