使用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; 

如果你想使用手动的淡入，调整这种不透明的步骤，当你达到不可见的地步时，加上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属性（如你说你这样做），那么你可以使用CSS（）这样做：

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

Answer 3

我假设你想要使用可见性：隐藏，而不是显示：无，所以你看到一个空的空间。

如果这样，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'); 
    } 
); 

我敢肯定有更好的方法做到这一点，但这工作没有问题afaik。

Answer 4

您也可以用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; 
} 
​