如何在display=inline-block下使用fadeIn

Question

我尝试淡入一个具有display:inline-block属性的div。
但是似乎fadeIn方法只支持display=block属性。
有没有办法改变这种行为？

- Itay Moav -Malimovka

Answer 1

如果您使用css()方法？

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

- Sotiris

---

我没有尝试过这个，但我有一种感觉，它可能会使元素在动画期间稍微跳动一下，因为它将在动画期间被改变为display:block;，然后在动画结束后再改回display:inline-block。所以我认为这不会起作用。不过还是值得一试的，所以给一个+1。 - Spudley

@Spudley，我也这样认为，并尝试使用“position：inline”而不是“position：inline-block”来查看它是否首先显示为“display:block”，但没有。http://jsfiddle.net/6DcY9/ 当然，这取决于其他代码，可能会发生这种情况。 - Sotiris

我正在使用 fadeIn("fast").css({'display':'inline-block'})，它不会导致我的布局跳来跳去。我认为它是在淡入完成之前设置了显示属性。另外，由于IE7不知道如何解释inline-block，我正在检查html是否有一个ie7类，然后设置.css({'display':'inline','zoom':'1'})。 - WNRosenberg

@Spudley - .css("display","inline-block") 不会在动画之后排队运行，它会在动画开始时立即执行。 - antishok

Answer 2

从我上面阅读的内容中综合起来，这是我得到的最佳答案：

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

- Itay Moav -Malimovka

---

太棒了，谢谢。 - Novasol

Answer 3

我建议在inline-block元素内部再加一层元素，并淡入该元素。

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

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

我知道这是多余的标记，但这可能是解决问题最实用的方法。

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

- Spudley

---

根据您设置内容的方式，这可能不是最美观的解决方案，但这可能是最容易实现且效果出奇的好的。非常感谢！ - shmeeps

Answer 4

根据 jQuery 论坛中的 这个问题，建议的解决方案是将其“display”属性更改为block并浮动它。

- Simeon

---

不用啊，如果你正在使用 inline-block，那是因为你试图避免浮动。 - Spudley

我同意。但我认为提供相关链接是很重要的。 - Simeon