jQuery中简单的淡入淡出和可见性

Question

我正在尝试使用jQuery visibility转换将div的css属性visible更改为.fadeIn()。

这是我的代码：

$('a').click(function() {
    $('#test').fadeIn('slow', function() {
     $(this).css('visibility','visible');
  });
});​

和小提琴：http://jsfiddle.net/np6r7/

Answer 1

实际上，我喜欢davidaam的回答。我会稍作修改：

    $('#test').css('visibility','visible').hide().fadeIn("slow");

Answer 2

你也可以使用CSS不透明度与JQuery的fadeIn结合来实现同样的目的。

使用opacity: 0;而不是在CSS中使用可见性 然后使用jQuery FadeTo将不透明度增加到100％：

$('#test').fadeTo('slow', 1);

这将保持定位，就像可见性一样，但是，重要的是要注意opacity: 0响应点击和按键等事件以及参与taborder。此外，我还读到负责使用visibility: hidden而非display: none更适合搜索引擎优化，但我不确定这是如何适用于opacity: 0。

JSFIDDLE ：http://jsfiddle.net/np6r7/15/

Answer 3

您无法为visibility制作动画。 fadein已关闭display:none;，因此应该是#test通过CSS的初始状态。如果您需要保持布局，可以尝试在div中包装测试，该div指定您需要的高度和/或宽度。