Fadein()，设置'display: table'而不是block

Question

现在，当我淡入我的覆盖层div时，它会自动设置为display:block;。但是我希望它是display:table。是否有类似于fadeIn()的jQuery函数可以实现这一点？

jQuery

$.when($("#overlay").fadeIn(200)).done(function() {
    setTimeout(function() {
        //ToDo
    });
}, 250);

- Kid Diamond

---

只需使用 $("#overlay").css('display','table'); 即可。 - Pranav C Balan

由于表格元素的布局问题，动画存在一些问题。 - adeneo

Answer 1

$("#overlay").fadeIn(200).css('display','table');

在 fadeIn 后更改 CSS 属性。

- AfromanJ

---

这样做，你不是失去了淡入效果吗？ - Yann Chabot

在IE Edge中，这会导致闪烁效果，使该路由对于该浏览器不可用。 - Phyllis Sutherland

Answer 2

在CSS或内联HTML中设置opacity: 0;，然后运行此代码。您可以在运行之前已经设置了display: table;。

如果您需要将display:none;设置为默认值（以从DOM中删除所占用的空间等），请按照以下步骤操作：

$('#overlay').animate({opacity: 'toggle'}, {duration: 200, start: function() {
        $(this).css('display', 'table');
    }
});

如果您不需要使用"display: none;"，只需将"start()"函数移出即可。

- Deryck

---

opacity:0 是否等同于 display:none;？ - Abhitalks

不，如果需要的话，你可以两者都做。如果你将 display: none 放在动画中，只需在开始时编辑动画以将显示设置为表格即可。我会编辑答案，以便您可以看到它。 - Deryck

那个，fadeIn 已经做到了这一点。它首先取消隐藏元素。在 fadeIn 之后设置 CSS 不是更简单吗？ - Abhitalks

@abhitalks 当然，我确实是故意这样做的，因为在某些浏览器上从 display: block 切换到 display: table 可能会产生意想不到的副作用（可能在 IE 上闪烁/闪光）。但本质上它们是相同的。这是演示（现在不再需要了 哈哈）http://jsfiddle.net/tF3a4/2/ - Deryck

好的，没问题 :) 为你的努力加分。 - Abhitalks

Answer 3

与您的代码一起工作：

$.when($("#overlay").fadeIn(200).css("display", "table")).done(function() {
    setTimeout(function() {
        //ToDo
    });
}, 250);

- Josh Harrison

---

这个 setTimeout 没有用处.. :) - Toni Michel Caubet

@Toni Michel Caubet，而且OP已经清楚地注释了“todo”...所以也许它不会太久无用 :) - Josh Harrison