jQuery淡入效果不能显示已设置为“visibility:hidden”的元素

Question

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

这里是淡入代码：

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

- kalpaitch

Answer 1

添加几个类似于这样的链式调用：

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

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

- Nick Craver

---

欢呼声效果良好。在那一帧中没有明显的延迟或偏移。 - kalpaitch

еҸҚд№ӢдәҰ然пјҡ$('.littleme').fadeOut(speed,function(){$('.littleme').css("visibility","hidden").css("display","");}); :-) пјҲжіЁпјҡиҜҘд»Јз ҒжҳҜдҪҝз”ЁjQueryеә“зҡ„JavaScriptд»Јз ҒпјҢз”ЁдәҺе°Ҷзұ»еҗҚдёә"littleme"зҡ„е…ғзҙ ж·ЎеҮәпјҢ并еңЁж·ЎеҮәе®ҢжҲҗеҗҺе°Ҷе…¶еҸҜи§ҒжҖ§и®ҫзҪ®дёәйҡҗи—Ҹ并е°ҶжҳҫзӨәи®ҫзҪ®дёәз©әгҖӮпјү - eruciform

为了消除最后的 display: none，你可以使用 $('.littleme').fadeTo(speed, 0);，这不会在最后设置 display，达到相同的效果，但更简单 :) - Nick Craver

$('.littleme').fadeTo(speed, 0, function(){ $(this).hide();}); 用于在动画后将其设置为“display:none”。感谢@NickCraver提供的原始代码片段 :) - StrikeForceZero

Answer 2

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

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

- David Hellsing

---

我总是对在CSS中使用不透明度感到有些担忧，因为IE的原因。据说jQuery可以毫无问题地处理这个问题？ - kalpaitch

这不会起作用，因为它仍然不可见，请自行测试。 - Nick Craver

当然，您必须删除visibility:hidden。是的，jQuery可以处理IE中的不透明度问题。 - David Hellsing

边缘情况。如果在不透明度为0的包装器中存在iframe内容，则jquery将无法对IE进行动画处理。您可以使用filter: inherit来尝试解决此问题，但是如果iframe不受您的控制（即社交共享小部件），则可能必须采用预期的答案。 - Paul T

Answer 3

<span style="opacity:0;">我被隐藏了</span>

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

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

DOM 布局中保留了空间

http://jsfiddle.net/VZwq6/

- user

---

由于IE<9不支持不透明度，而我想从一个不可见的状态开始，因此我将这个解决方案与https://github.com/bladeSk/internet-explorer-opacity-polyfill相结合。 - Chris Marisic

谢谢 - 绝妙的建议 - 在我的情况下对我有用，当我添加的元素在消失并开始淡入之前闪烁了一毫秒。 :) fadeTo和opacity:0 - 解决了将元素添加到dom后，在给出淡入命令之前闪烁元素的问题。 - Pasha

Answer 4

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

- Neil

Answer 5

试着匹配隐藏元素？

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

- iivel