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

Make element hide directly after show is completed jquery

本文关键字：显示 jquery 元素 隐藏      更新时间：2023-09-26

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

我最初试着按顺序这样做:

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

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

然后我尝试在回调函数中这样做:

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

但是这个触发得太早了，所以加载会消失，在主div显示之前半秒什么都没有，这不是我想要的。

然后我尝试使用promise方法，如下所示:

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

但是这立即隐藏了加载div，在主div显示之前你几乎看不到它。

我找不到其他方法来做这件事。

在隐藏加载div前设置一个超时时间

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

替换代码:

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

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

或使用:

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

添加了jQuery complete事件处理程序到show，所以它会隐藏加载div当它完成:

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

这是你要找的吗?

$("#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>

你可以这样做:

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

查看答案:https://stackoverflow.com/a/4508657/1085414

相关文章：