显示完成后直接让元素隐藏jquery

Question

我试图简单地隐藏我的加载 div 一旦主 div 在 JQuery 中完全加载，我在网上尝试过的所有建议似乎都不起作用并且我卡住了。

我最初尝试按顺序执行此操作：

$("#main").show();
$("#loading").hide();

但是隐藏功能在显示完成之前触发

然后我尝试在回调函数中做如下：

$("#main").show(500, function(){
    $("#loading").hide();
});

但这触发得太早了，所以加载会消失，半秒后什么也没有，直到主要 div 显示这不是我想要的。

然后我尝试使用如下所示的promise方法：

$("#main").show().promise().done(function(){
    $("#loading").hide();
});

但这会立即隐藏加载 div 并且在主要 div 显示之前您几乎看不到它。

我找不到任何其他方法来做到这一点。

Answer 1

替换您的代码：

$("#main").show(500, function(){
    $("#loading").hide();
});

有：

setTimeout(function () {
    $("#main").show(0, function(){
        $("#loading").hide();
    });
}, 500);

或使用：

$("#main").delay(500).show(0, function(){
    $("#loading").hide();
});

Answer 2

在隐藏加载前设置超时div。

setTimeout(function(){
    $("#loading").hide(); 
}, 1000);

Answer 3

向显示添加了 jQuery 完成事件处理程序，因此它将在完成时隐藏加载 div：

$("#main").show(complete(function(){
        $("#loading").hide();
    });

Answer 4

这是您要找的吗？

$("#main").show(1000, function() {
  $("#loading").hide();
});

#main {
  width: 100px;
  height: 100px;
  background-color: red;
}
#loading {
  position: absolute;
  top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="main" hidden></div>
<div id="loading">Loading...</div>

Answer 5

你可以这样做：

$('#outer').on('click', function(event)
{
    $('#inner').show(0).delay(500).hide(0);    
});

看到这个答案：

显示完成后直接让元素隐藏jquery

Make element hide directly after show is completed jquery

javascript

jquery

delay

show