CSS Visibility Fading: Visible?

Question

I use visibility: hidden; and visibility: visible; to display and split divs, such as modals and other divs. I would like to have a fade effect when I click the <a> link to launch javascript to show and hide the div, but I really would like to continue using the visibility element to switch the visibility of the div. Is there a way to do this using HTML / CSS / JavaScript / jQuery?

Answer 1

in jQuery:

 $('selector').fadeIn(); 

With CSS use opacity: (it's 50%)

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

If you want to make fadeIn manually, adjust this opacity step by step, and when you reach the invisibilty point, add display:none But if you use jQuery anyway, stick to fadeIn()

fadeIn() also supports speed, just add milliseconds as the first parameter. Take a look at the docs: http://api.jquery.com/fadeIn/

Want to save the display property in css, use fadeTo() . This requires a percentage of opacity: http://api.jquery.com/fadeto/

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

Answer 2

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

If so, fadeIn () and fadeOut () will not work for you because it disables the display after it disappears.

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

This is how I will 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 am sure there is a better way to do this, but it works without afaik problems.

Answer 3

You can also accomplish this with css3: http://jsfiddle.net/dc7EV/

 $("#hideme").click(function(){ $(this).removeClass("fadein").addClass("fadeout"); setTimeout(function(){ $("#hideme").removeClass("fadeout").addClass("fadein"); }, 2000); });​ 

CSS

 #hideme{ border:solid 1px #000; background:#ccc; padding:20px; } @-webkit-keyframes fadeout{ 0%{opacity:1;visibility:visible;} 99%{opacity:0;} 100%{opacity:0;visibility: hidden;} } .fadeout { -webkit-animation:fadeout 1s linear; visibility:hidden; } @-webkit-keyframes fadein{ 0%{opacity:0;visibility:visible;} 100%{opacity:1;} } .fadein { -webkit-animation:fadein 1s linear; }​ 

Answer 4

I prefer Rene's answer, but if you really want to use the visibility attribute (as you say), you can use css () to do this:

 $('selector').css('visibility', 'hidden'); $('selector').css('visibility', 'visible');