jQuery中简单的fadeIn和visibility

Question

我正在尝试使用jQuery的.fadeIn()过渡效果将一个div的css属性visibility更改为visible。

这是我的代码：

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

演示代码链接： http://jsfiddle.net/np6r7/

- onimojo

Answer 1

实际上，我喜欢davidaam 的回答。我会做一个小修改：

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

- Softwaretech

Answer 2

你也可以使用CSS的透明度配合JQuery的fadeIn来实现相同的效果。 在你的CSS中，不要使用visibility，而是使用opacity: 0;， 然后使用jQuery的FadeTo将不透明度增加到100%: $('#test').fadeTo('slow', 1); 这将像visibility一样保留定位，但重要的是要注意，opacity: 0响应点击和按键等事件，并参与taborder。此外，我还读过一个关于SEO更好的负责任的visibility: hidden的用法，而不是display: none，但我不确定这如何适用于opacity: 0。 JSFIDDLE: http://jsfiddle.net/np6r7/15/

- Uncle Slug

---

这个问题的困扰在于，元素对点击/鼠标悬停等做出响应。这可能并不总是一个问题，但对我的情况来说确实是。 - Regular Jo

.hide().fadeIn("slow"); 对我来说导致内容来回移动。.css('opacity', '0').fadeTo('slow', 1); 没有这个问题。 - Andrei

Answer 3

你不能通过动画实现元素的可见性 visibility。使用 display:none; 来设置 #test 的初始状态，fadein 将会与之配合使用。如果你需要保持布局不变，可以尝试将 #test 包装在一个指定所需高度和/或宽度的 div 中。

- moribvndvs

---

我认为fadeIn也需要display:none。 - davidaam

如果您不想让空白空间出现，可以在淡入元素之前将其隐藏起来，就像这样：$('#test').hide().fadeIn('slow', function() { $(this).css('visibility','visible'); }); - davidaam

我相信一个更简单和正确的表达方式是 $("#test").hide().css("visibility", "visible").fadeIn();。它对我有效。 - Gabriel Nahmias