阻止Jquery在元素上的.fadeOut（）之后应用display：none CSS

Question

我使用一些Jquery来淡出一个元素，但是我想保留布局，所以我试图应用一个可见性：在fadeOut之后隐藏到CSS类。

然而，这似乎不起作用，该元素仍被设置为display：none。

我知道我可以通过在元素周围添加一个包装div来解决这个问题，但说实话，它需要花费大量精力和内容而不是通过jQuery找到解决方案，而不是重新编辑HTML

我尝试了以下内容：

  $("#mmoverlaycenter").fadeOut().css("visibility", "hidden");
  $("#mmoverlaycenter").css("display", "initial");

执行单独行的原因是声明多个CSS更改似乎不断引发语法错误。

我认为这应该有效，但元素最终会有以下样式：

<div id="mmoverlaycenter" style="visibility: hidden; display: none;">

我有一个想法是淡入淡出动画需要时间才能完成，因此动画开始运行，应用其他样式属性，然后动画结束并应用display：none。

您怎么看？

欢呼声

Answer 1

使用此：

$("#mmoverlaycenter").fadeOut(function () {
    $(this).css("display", "block");
});

或者更好的是，删除display CSS。

$("#mmoverlaycenter").fadeOut(function () {
    $(this).css("display", "");
});

将两者结合起来：

$("#mmoverlaycenter").fadeOut(function () {
    $(this).css({
        "display": "block",
        "visibility": "hidden"
    });
});

Answer 2

尝试使用done（）函数..

$("#mmoverlaycenter").fadeOut().css("visibility", "hidden").done(function(){
                  $(this).css("display", "block");
    });

Answer 3

只需将过渡到不透明度为0的动画应该可以达到你想要的效果：

$("#mmoverlaycenter").animate({ 
    opacity: 0
});