淡入CSS可见性:可见？

Question

我正在使用visibility: hidden;和visibility: visible;显示和配置div,例如模态和其他div.我想点击<a>链接运行javascript来显示和隐藏div 时有淡入效果,但我非常想继续使用该visibility元素来切换div可见性.有没有办法用HTML/CSS/JavaScript/jQuery做到这一点？

Answer 1

在jQuery中:

$('selector').fadeIn();

使用CSS,使用不透明度:(这是50%)

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

如果您想手动执行fadeIn,请逐步调整此不透明度,当您达到invisibilty时,添加display:none但是如果您仍然使用jQuery,请坚持使用fadeIn()

fadeIn()也支持速度,只需添加毫秒作为第一个参数.看看文档:http://api.jquery.com/fadeIn/

想要将display属性保存在css中,请使用fadeTo().它需要不透明度百分比:http://api.jquery.com/fadeto/

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

Answer 2

我假设您要使用visibility:hidden而不是display:none,以便您看到一个空白区域.

如果是这样,fadeIn()和fadeOut()对你不起作用,因为它在淡出后将显示设置为无.

而是使用jQuery animate()来设置不透明度的动画,然后在回调中添加可见性:隐藏/可见.

以下是我将如何使用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');
  }
);

我确信有更好的方法可以做到这一点,但这可以毫无问题地工作.

Answer 3

您还可以使用 css3 来完成此操作： http: //jsfiddle.net/dc7EV/

\n\n

$("#hideme").click(function(){\n    $(this).removeClass("fadein").addClass("fadeout");\n\n    setTimeout(function(){\n        $("#hideme").removeClass("fadeout").addClass("fadein");\n    }, 2000);\n});\xe2\x80\x8b\n

\n\n

CSS

\n\n

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

\n