使用CSS的visibility: visible来实现淡入效果？

Question

我正在使用 visibility: hidden; 和 visibility: visible; 来显示和隐藏诸如模态框和其他 div 等元素。我希望在单击 <a> 链接运行 JavaScript 显示和隐藏 div 时有一个淡入效果，但我非常希望继续使用 visibility 元素来切换 div 的可见性。是否有一种使用 HTML/CSS/JavaScript/jQuery 实现这一点的方法？

- tkbx

---

不透明度是淡入/淡出的唯一方式。 - Shmiddty

@Shmiddty，你能把它完全淡出，然后将其设置为“隐藏”吗？ - tkbx

可能是简单的jQuery淡入和可见性的重复问题。 - Johann

Answer 1

在 jQuery 中：

$('selector').fadeIn();

使用CSS时，可以使用opacity属性控制元素的透明度（例如设置为50%）。

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

如果你想手动执行fadeIn效果，可以逐渐调整元素的不透明度，当达到完全透明时，再添加display:none属性。但如果您已经使用jQuery，最好使用fadeIn()方法。

fadeIn()方法也支持速度控制，只需要在第一个参数中设置毫秒数即可。具体用法请参考文档：http://api.jquery.com/fadeIn/

如果希望保留CSS的display属性，可以使用fadeTo()方法。该方法需要设置不透明度的百分比作为参数。详细说明请参考：http://api.jquery.com/fadeto/

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

- Rene Pot

---

这会使它仍然停留在“那里”，但不可见吗？下面的东西还能被点击吗？ - tkbx

@tkbx 在其中添加了解决方案。fadeIn() 和 fadeOut() 可以处理它。但是手动操作不行。您还需要更改 display:none。 - Rene Pot

@RenePot 我相信OP不想使用display:none，因为它会导致其后的流式布局元素移动。 - Shmiddty

如果 visibility: hidden，.fadeIn() 不会有任何效果。 - Peter Ajtai

Answer 2

我猜你想使用visibility:hidden而不是display:none，这样你就可以看到一个空白的空间。

如果是这样，fadeIn()和fadeOut()对你来说不起作用，因为它在淡出后将显示设置为none。

相反，使用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');
  }
);

我相信还有更好的方法来完成这个任务，但是据我所知，这种方法可以顺利地运行。

- Hrvoje Miljak

---

你也可以使用回调函数来控制 fadeOut。$('#div-id').fadeOut(function() { $('#div-id').css('display', 'block').css('visibility', 'hidden'); }) - Skillzore

@Skillzore 我尝试使用带回调函数的 fadeIn，虽然它可以工作，但是它立即执行而没有任何淡入效果，我已经尝试了 "slow"、"fast" 和 500 - 都没有淡入效果。 - PandaWood

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;
}
​

- Shmiddty

Answer 4

我更喜欢Rene的答案，但如果你非常想使用visibility属性（正如你所说），那么你可以使用css()来实现：

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

- Eudis Duran