jquery - jQuery 中的简单淡入和可见性

Question

我正在尝试将visibilitydiv 的 css 属性更改为visible使用 jQuery.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 opacity 和 JQuery 的 fadeIn 来达到同样的效果。

不要在 CSS 中使用可见性，而是使用opacity: 0; Then use jQueryFadeTo将不透明度提高到 100%：

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

这将像可见性一样保留定位，但是，重要的是要注意opacity: 0响应点击和按键等事件以及参与 taborder。此外，我还读到负责任地使用visibility: hidden而不是display: none对 SEO 更好，但我不确定这如何适用于opacity: 0.

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

Answer 3

你不能为visibility. fadein被关闭display:none;，所以这应该是#test通过 CSS 的初始状态。如果您需要保留布局，您可以尝试将测试包装在一个指定您需要的高度和/或宽度的 div 中。