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?

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

Answer 2

I assume you want to use visibility:hidden instead of display:none so that you see an empty space.

If so fadeIn() and fadeOut() won't work for you because it sets the display to none after it fades out.

Instead use jQuery animate() to animate the opacity and then add visibility:hidden/visible in the callback.

Here is how I would do it with jQuery.

$('#a-id').click(
  if( $('#div-id').css('visibility') == 'hidden'){
    $('#div-id').animate({opacity: 1}, 'fast', function(){
    $('#div-id').css('visibility', 'visible');
  });
  }else{
    $('#div-id').animate({opacity: 0}, 'fast', function(){
    $('#div-id').css('visibility', 'hidden');
  }
);

I'm sure there is a better way of doing it but this works without problems afaik.