JQuery hide and show the effect visible at the end of the function

Question

Consider the following code:

<div id="thediv" >hola</div>
<button id="resharper">button</button>

with javascript / jQuery:

$("button").on( 'click', function() {
    $("#thediv").show();
    alert('click');
});

$(document).ready(function(){
    $("#thediv").hide();
})

I want the behavior to show the div tag first and then display the "Click" warning. Instead, the behavior is reversed. The warning text is displayed first, and then the button is displayed. Did I miss something?

Can I somehow change the code to get the desired behavior when the div is first displayed and then warning text appears.

Answer 1

Make sure that jQuery.show (options) allows you to pass PlainObject .

complete: , .

:

$("button").on( 'click', function() {
    $("#thediv").show({ 
      complete: function() {
        alert('click');
      } 
    });
});

$(document).ready(function(){
    $("#thediv").hide();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thediv" >hola</div>
<button id="resharper">button</button>
with javascript/jQuery:

Hide result

Answer 2

, alert() , DOM, alert().

console.log() , , alert() setTimeout() .

$("button").on( 'click', function() {
    $("#thediv").show();
    setTimeout(function() {
      alert('click');
    }, 10);
});

#thediv { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thediv" >hola</div>
<button id="resharper">button</button>
with javascript/jQuery:

Hide result

Answer 3

$("button").on('click', function() {
  $("#thediv").show("slow", callback);
});

$(document).ready(function() {
  $("#thediv").hide();
})

function callback() {
  alert('click');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thediv">hola</div>
<button id="resharper">button</button>

Run codeHide result

• Add option to .show()