6

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

4

4 回答 4

9

在 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
于 2012-11-13T15:51:53.297 回答
8

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

如果是这样，fadeIn() 和 fadeOut() 将不适合您，因为它在淡出后将显示设置为无。

而是使用 jQuery animate() 为不透明度设置动画，然后在回调中添加 visibility:hidden/visible。

这是我将如何使用 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。

于 2012-11-13T16:02:58.120 回答
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;
}
​
于 2012-11-13T16:23:36.823 回答
0

我更喜欢 Rene 的回答，但是如果您强烈希望使用可见性属性（正如您所说的那样），那么您可以使用 css() 这样做：

$('selector').css('visibility', 'hidden');
$('selector').css('visibility', 'visible');
于 2012-11-13T15:55:40.620 回答