tkbx tkbx - 1 year ago 146
Javascript Question

Fade in with CSS visibility: visible?

I'm using

visibility: hidden;
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
link to run the javascript to show and hide the divs, but I'd very strongly like to continue using the
element to toggle the div visibility. Is there a way to do this with HTML/CSS/JavaScript/jQuery?

Answer Source

in jQuery:


With CSS, use opacity: (this is 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:

Want to keep the display property in css, use fadeTo(). It requires the opacity percentage:

$(this).fadeTo("slow", 1); // 100% visible
$(this).fadeTo("slow", 0); // 0% visible aka hidden
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download