Make element hide directly after show is completed jquery

Question

I am trying to simply hide my loading div once the main div is fully loaded in JQuery, all the suggestions I have tried online don't seem to work and I am stuck.

I tried to initially do it sequentially like this:

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

But the hide function triggered before the show was complete

Then I tried to do it in the callback function as below:

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

But this fired too early so the loading would disappear and there would be nothing for a half second until the main div showed which was not what I wanted.

Then I tried to use the promise method as shown below:

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

But this hide the loading div immediately and you could hardly see it before the main div showed.

I can not find any other way to do this.

Use `fadeIn` and `fadeOut` instead of `show` and `hide` – Tushar Aug 18 '15 at 09:24 — Tushar, Aug 18 '15 at 09:24
but I don't want any animation – kabeersvohra Aug 18 '15 at 09:25 — kabeersvohra, Aug 18 '15 at 09:25

score 0 · Answer 1 · answered Aug 18 '15 at 09:26

0

Replace your code:

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

With either:

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

Or using:

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

answered Aug 18 '15 at 09:26

Praveen Kumar Purushothaman

164,888
24
203
252

these both have the same problem. There is the delay and then the loading hides, waits for a half second and then the main div shows – kabeersvohra Aug 18 '15 at 09:37

score 0 · Accepted Answer · answered Aug 18 '15 at 09:28

0

Set a timeout before hiding the loading div.

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

answered Aug 18 '15 at 09:28

aarjithn

1,151
8
20

the problem with this is I dont want the loading on the screen at the same time as the other div. I want the hide to trigger immediately after not at some arbitrary point after – kabeersvohra Aug 18 '15 at 09:38
hmm. does not seem to be working for me in real code. I will accept this solution i guess as you have proved it works and it may be useful for the future – kabeersvohra Aug 18 '15 at 10:07

score 0 · Answer 3 · answered Aug 18 '15 at 09:32

0

Added jQuery complete event handler to the show, so it will hide the loading div when it's complete:

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

answered Aug 18 '15 at 09:32

DieVeenman

457
1
3
18

I tried this but it just hangs and doesnt hide the loading div nor show the main div – kabeersvohra Aug 18 '15 at 09:38

score 0 · Answer 4 · answered Aug 18 '15 at 09:36

0

Is this what you are looking for?

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

answered Aug 18 '15 at 09:36

Aruna Tebel

1,436
1
12
24

this is the same as the solution I already tried. There is a delay between the loading going away and the main div appearing – kabeersvohra Aug 18 '15 at 09:40
_loading going away and the main div appearing_? Do you want to appear the `main` div after the `loading` is finished? – Aruna Tebel Aug 18 '15 at 09:42
yes. I want to basically call the hide when the main div is loaded, not loading. The callback function waits for the css to be changed but not the actual element to be drawn onto the screen – kabeersvohra Aug 18 '15 at 09:43

score 0 · Answer 5 · edited May 23 '17 at 12:06

0

You can do something like this:

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

See this answer: https://stackoverflow.com/a/4508657/1085414

edited May 23 '17 at 12:06

Community

1
1

answered Aug 18 '15 at 09:41

TOAOGG

392
1
10

Make element hide directly after show is completed jquery

5 Answers5