jquery fade 元素不显示样式为“可见性:隐藏”的元素

发布于 2024-08-24 22:29:04 字数 245 浏览 4 评论 0原文

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

这是淡入淡出线:

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

I have a bunch of thumbnails which I am loading with a style of visibility: hidden; so that they all maintain their correct layouts. Once the page is fully loaded I have a jquery function that fades them in. This worked when their style was set to display: none; but obviously the layout screwed up then. Any suggestions?

Heres the fade line:

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

瞄了个咪的 2024-08-31 22:29:04

像这样向链添加一些调用:

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

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

Add a few calls to the chain like this:

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

This will change it to display:none for 1 frame before fading in, occupying the area again.

邮友 2024-08-31 22:29:04

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

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

try using opacity and animate():

$('.littleme').css('opacity',0).animate({opacity:1}, 1000);
睡美人的小仙女 2024-08-31 22:29:04

我已隐藏

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

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

空间保留在 DOM 布局中

http://jsfiddle.net/VZwq6/

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

To Show : $('span').fadeTo(1000,1)

To Hide  : $('span').fadeTo(1000,0)

The space is preserved in the DOM layout

http://jsfiddle.net/VZwq6/

月竹挽风 2024-08-31 22:29:04

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

Cant you use fadeTo(duration, value) instead? Surely this way you can fade to 0 and 1, that way you are not affecting the document flow...

谁许谁一生繁华 2024-08-31 22:29:04

尝试匹配隐藏元素?

$(".littleme:隐藏").fadeIn();

Try matching for the hidden element?

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文