如何将 fadeIn 与 display=inline-block 一起使用

Question

我尝试在一个 div 中淡入淡出，它（应该）有一个显示内联块。
似乎 fadeIn 方法仅假设 display=block。
有没有办法改变这种行为？

Answer 1

如果您使用css()？

$("div").fadeIn().css("display","inline-block");

Answer 2

综合我上面读到的内容，这是我得到的最好的：

    $(div).css({
        opacity: 0,
        display: 'inline-block'     
    }).animate({opacity:1},600);

Answer 3

我建议在 inline-block 元素中放置一个额外的元素层，然后将其淡入淡出。

<div style='display:inline-block;'>
    <div id='fadmein'>....</div>
</div>

$('#fademein').fadeIn();

我知道这是额外的标记，但这可能是解决问题的最务实的解决方案。

另一种方法是使用 JQuery 的 animate() 方法来更改不透明度，而不是使用 fadeIn()。这只会改变 opacity 属性；因此 display 属性将保持不变。

Answer 4

根据 jQuery 论坛中的 这个问题，建议的解决方案是更改其 ´ display´属性来block并使其浮动。