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

Question

我试图通过jQuery 转换visibility将div 的css属性更改为.visible.fadeIn()

这是我的代码:

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

Answer 1

实际上,我喜欢davidaam的回答.我会稍作修改:

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

Answer 2

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

而不是在CSS中使用可见性,使用opacity: 0; 然后使用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中包装测试,指定所需的高度和/或宽度.

另外如果你不想拥有空的空间,你可以在淡化之前隐藏元素,如下所示:`$('#test').hide().fadeIn('slow',function(){$(这个).css('visibility','visible');});` (6认同)
@davidaam我相信一个更简单和正确的形式是`$("#test").hide().css("visibility","visible").fadeIn();`.这个对我有用. (6认同)
我认为fadeIn还需要display:none (2认同)