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

【问题标题】：jquery fade element does not show elements styled 'visibility: hidden'jquery 淡入淡出元素不显示样式为“可见性：隐藏”的元素
【发布时间】：2014-09-06 14:40:39
【问题描述】：

我有一堆缩略图，我正在以visibility: hidden; 的样式加载它们，以便它们都保持正确的布局。页面完全加载后，我有一个淡入淡出它们的 jquery 函数。当它们的样式设置为 display: none; 时，这很有效，但显然布局当时搞砸了。有什么建议吗？

下面是淡入淡出线：

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

【问题讨论】：

标签： jquery visibility fadein

【解决方案1】：

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

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

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

空间保留在 DOM 布局中

http://jsfiddle.net/VZwq6/

【讨论】：

由于 IEgithub.com/bladeSk/internet-explorer-opacity-polyfill 结合使用
谢谢 - 很好的建议 - 在我添加的元素时对我有用 - 在消失并开始淡入之前闪烁一毫秒。 :) fadeTo 和 opacity:0 - 解决了在我将元素添加到 dom 之后和之前给fadeIn 命令之前闪烁的问题。

【解决方案2】：

你不能使用 fadeTo(duration, value) 代替吗？当然，这样你可以淡入 0 和 1，这样你就不会影响文档流...

【讨论】：

【解决方案3】：

尝试匹配隐藏元素？

$(".littleme:hidden").fadeIn();

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

干杯效果很好。在那一帧中没有明显的延迟或偏移。
反之亦然：$('.littleme').fadeOut(speed,function(){$('.littleme').css("visibility","hidden").css("display","");}); :-)
@eruciform - 要消除最后的display: none，你可以只做$('.littleme').fadeTo(speed, 0);，它不会在最后设置display，同样的效果，更少的工作:)跨度>
$('.littleme').fadeTo(speed, 0, function(){ $(this).hide();}); 用于在动画后将其设置为display:none。感谢@NickCraver 的原始 sn-p :)

【解决方案5】：

尝试使用 opacity 和 animate():

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

【讨论】：

由于 IE，我总是有点厌倦在 css 中使用不透明度。大概 jquery 处理这个没有问题？？？
这行不通，因为它仍然不可见，你自己测试看看。
当然，您必须删除可见性：隐藏。是的，jQuery 处理了 IE 中的不透明度问题。
边缘案例。如果 opacity: 0 包装器中有 iframe 内容，jquery 将无法为 IE 制作动画。您可以使用 filter:inherit 来尝试解决此问题，但如果 iframe 超出您的控制范围（即社交共享小部件），您可能必须使用例外答案。