jQuery淡入淡出元素不显示样式为“可见性：隐藏”的元素

72

我有一堆缩略图visibility: hidden;，它们以样式加载，以便它们都保持正确的布局。页面完全加载后，我有一个jquery函数使它们淡入。当将其样式设置为，display: none;但布局显然搞砸了时，此功能就起作用了。有什么建议？

渐隐线：

$('.littleme').fadeIn('slow');

jquery visibility fadein

— 卡尔帕奇
source

154

像这样向链中添加一些调用：

 $('.littleme').css('visibility','visible').hide().fadeIn('slow');

display:none淡入之前，它将更改为1帧，再次占据该区域。

— 尼克Craver
source

干杯效果很好。在那一帧中没有明显的延迟或移位。

— kalpaitch

2

相反：$('.littleme').fadeOut(speed,function(){$('.littleme').css("visibility","hidden").css("display","");});:-)

— eruciform

5

@eruciform-要消除display: none最后的结果，您可以做$('.littleme').fadeTo(speed, 0);，但不会最终结束，只需display较少的工作即可达到相同的效果：）

— Nick Craver

2

$('.littleme').fadeTo(speed, 0, function(){ $(this).hide();});用于将其设置display:none为动画之后。感谢@NickCraver的原始

— 摘要

27

尝试使用不透明度和animate()：

$('.littleme').css('opacity',0).animate({opacity:1}, 1000);

— 戴维·海灵
source

由于IE，我总是对使用CSS不透明。大概jQuery处理没有问题吗？？？

— kalpaitch

由于它仍然不可见，因此无法使用，请亲自测试一下。

— 尼克·克雷弗

1

当然，您必须删除“可见性：隐藏”。是的，jQuery处理IE中的不透明度问题。

— David Hellsing 2010年

边缘情况。如果不透明度：0包装器中包含iframe内容，则jQuery将无法为IE设置动画。您可以使用过滤器：继承来尝试解决此问题，但是如果iframe不在您的控制范围内（即社交共享小部件），则可能必须使用例外答案。

— Paul T

10

<span style="opacity:0;">I'm Hidden</span>

显示： $('span').fadeTo(1000,1)

隐藏： $('span').fadeTo(1000,0)

该空间保留在DOM布局中

http://jsfiddle.net/VZwq6/

— 用户
source

1

由于IE <9中不支持不透明性，因此我想从一个不可见状态开始，所以我将此解决方案与github.com/bladeSk/internet-explorer-opacity-polyfill

— Chris Marisic 2014年

1

不能用而不是使用fadeTo（duration，value）？当然，您可以淡入0和1，这样就不会影响文档流。

— 尼尔
source

0

尝试匹配隐藏元素？

$（“。littleme：hidden”）。fadeIn（）;

— 伊维尔
source