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()也支持速度，只需添加毫秒作为第一个参数。查看文档：{{3}}

要将display属性保留在css中，请使用fadeTo()。它需要不透明度百分比：http://api.jquery.com/fadeIn/

$(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/

来完成此操作

$("#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

我更喜欢Rene的回答，但是如果你强烈想要使用visibility属性（就像你说的那样），那么你可以使用css（）来做到这一点：

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

淡入CSS可见性：可见？

4 个答案: