jQuery fadeIn()导致display:block为内联元素
http://jsfiddle.net/chovy/dk5Ua/
var $span = $('foo'); $span.hide(); $("div").append($span); $span.fadeIn();
你会注意到结果的span有内联样式display: block;
而不是内联。
这是生成的html:
foo
如何让fadeIn()导致显示:内联?
我刚刚找到了解决类似问题的简单方法。 在您的情况下,修复将是这样的:
$span.css('display', 'inline').hide().fadeIn();
我和阿德里安在一起; 这真的不是一个问题。 但你是对的:当你使用任何显示/隐藏元素的东西时(例如show,hide,togle,fadeOut等),jQuery会对显示属性做一个非常天真的翻译。
我老实说永远不明白为什么他们这样做(简单地将显示设置为:
isShown ? '' : 'none';
而不是他们的逻辑,这本质上是:
isShown ? 'block' : 'none';
但他们有理由几乎所做的一切,所以我想他们在设置错误的显示类型背后有一些逻辑。
*编辑*
我怀疑,jQuery人确实有他们的理由(参见jfriend00的评论); 我也看到现在问题中存在一个实际问题:
如何让fadeIn()导致显示:内联?
答案是你需要看看fadeIn是如何工作的; 基本上它只是:
this.animate({opacity: "show"}, speed, easing, callback );
换句话说,它大致相当于:
this.animate({opacity: '100%'}, speed, easing, function() { this.css('display', 'block') });
(警告:我实际上并不是jQuery动画function的大用户,所以虽然上面的代码应该可行,但我没有做出任何承诺)。
鉴于此,如果您想将显示设置为其他内容(例如说'inline'
),您可以执行以下操作:
this.animate({opacity: '100%'}, speed, easing, function() { this.css('display', 'inline') // or you could use this.css('display', '') });
我发现这非常有用,而且有点简单(基于MakuraYami对这个问题的回答 ):
$span.fadeIn().css('display', 'inline');
通过克隆原始对象,我可以调用fadeIn,它给了我一个内联样式。
var $htm = $('') , $divs = $('div'); $divs.replaceWith(function(){ return $htm.clone().fadeIn(2000); });