在元素上的 .fadeOut() 之后停止 Jquery 应用 display:none CSS [重复]答案

【问题标题】：Stopping Jquery from applying display:none CSS after a .fadeOut() on element [duplicate]在元素上的 .fadeOut() 之后停止 Jquery 应用 display:none CSS [重复]
【发布时间】：2015-08-27 04:40:51
【问题描述】：

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

但这似乎不起作用，该元素仍被设置为 display:none。

我知道我可以通过在元素周围添加一个包装 div 来解决这个问题，但老实说，它需要付出很多努力和 id 而不是通过 jQuery 找到解决方案，而不是返回编辑 HTML

我尝试了以下方法：

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

分行的原因是声明多个 CSS 更改似乎不断抛出语法错误。

在我看来这应该可行，但是元素最终具有以下样式：

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

我的一个想法是淡入淡出动画需要时间来完成，所以动画开始运行，应用其他样式属性，然后动画结束并应用 display:none。

你怎么看？

干杯

【问题讨论】：

您也可以animate() CSS 属性opacity 将其设置为0，然后应用visibility: hidden;。

标签： jquery html css

【解决方案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"
    });
});

【讨论】：

完美，很有魅力。非常感谢。出于兴趣，仅就我自己的知识而言，将一个函数放在这样的函数中，调用的第一个函数是否要等到它完全完成后才能运行子函数？
这是一个回调函数哥们。该函数在动画完成后执行。这是正确的称呼方式。 @Ash...

【解决方案2】：

尝试使用 done() 函数..

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

【讨论】：

那行不通。您需要使用promise() 方法，并且在动画完成之前不要将可见性设置为隐藏。无论如何，最好只使用 fadeOut() 完成回调。另一方面，使用done():$("#mmoverlaycenter").fadeOut().promise().done(function () { $(this).css({ display: "block", visibility: "hidden" }); });

【解决方案3】：

只需将过渡动画设置为不透明度为 0 即可满足您的要求：

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

【讨论】：