Fade in with CSS visibility: visible?

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?

Accepted 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
```

Fade in with CSS visibility: visible?

Solution

Problem

Related problems