在我的网页中,我有大约30个dom节点应该被添加为不可见的,当它们完全加载后就会淡入显示。
这些元素需要一个display: inline-block样式。
我想使用jQuery的.fadeIn()函数。这要求元素最初具有display: none;规则以最初隐藏它。 然后在.fadeIn()之后,元素当然具有默认的display: inherit;
如何在display属性值不是inherit的情况下使用淡入功能呢?
$("div").fadeIn().css("display","inline-block");
为了充实Phil的好主意,这里有一个fadeIn()函数,它可以逐个加载.fadeed类的每个元素并使之淡入,转化为animate()函数:
原始代码:
$(".faded").each(function(i) {
$(this).delay(i * 300).fadeIn();
});
新增:
$(".faded").each(function(i) {
$(this).delay(i * 300).css('opacity',0).animate({'opacity': 1}, 500);
});
希望这能帮助像我一样的jQuery新手 :) 如果有更好的方法,请告诉我们!
我尝试了Makura的解决方法,但并没有起作用。我的解决方案是:
<div id="div" style="display: none">Some content</div>
$('#div').css('display', 'inline-block').hide().fadeIn();
hide
立即应用 display: none
,但在此之前,它将当前的显示值保存在 jQuery 数据缓存中,这些值将在后续的动画调用中恢复。
因此,div
最初以静态定义的 display: none
开始。然后它被设置为 inline-block
并立即隐藏,只是为了淡入到 inline-block
中。
.show()
的说明:
因此我解决这个问题的方法是将如果一个元素的显示值是内联的,然后被隐藏并显示,它将再次以内联方式显示。
inline-block
样式应用于该元素的类,并添加另一个名为“hide”的类,该类应用了display: none;
。当我使用.show()
在该元素上时,它以行内方式显示。#el{display:inline-block;display:none;}
并运行$('#el').fadeIn();
时,它也应该起作用,使其变成inline-block。但事实并非如此。 - Fankydisplay:none
也可以正常工作。使用:$('#element').fadeIn().addClass('displaytype');
$('#element').fadeOut().removeClass('displaytype');
) 的意思是在 CSS 中设置完成后执行。#element.displaytype{display:inline-block;}
fadeIn()
应该按照预期工作,即在设置为#element{display:inline-block;display:none;}
时只删除最后一个规则 - display:none
,但它却错误地删除了两个规则。
$("div").fadeIn().css("display","");
。 - Brandon Durham