Question

Code below works but what doesn’t work properly is delaying process because I don’t know how long it is going to take for process.php to response. It always differ. No certain time.

Code below works (apart from faulty delay) like this:

1. When I click run icon, run icon should disappear and loader icon should appear slowly.
2. After response coming from process.php, loader icon should disappear slowly and success/fail icon appear slowly. Straight after next (div) should appear slowly if successful.

Thanks

$(document).ready(function()
{
   $("#run").click(function(event)
   {
      $('#run').hide();
      $('#loader').fadeIn(1000).delay(1000);

      $.ajax(
      {
         type       : 'POST',
         url        : 'process.php',
         data       : 'user=jolly',
         dataType   : 'json',
         success    : function(response)
         {
            if(response.status == 'success')
            {
               $('#loader').delay(1000).fadeOut();
               $('#success').delay(4000).fadeIn(1000);
               $('#next').delay(4500).fadeIn(1000);
            }
            else
            {
               $('#loader').delay(1000).fadeOut();
               $('#fail').delay(4000).fadeIn(1000);
               $('#next').delay(4500).fadeIn(1000);
            }
         }
      });
   });
});


<div id="first">
   <img id="run" src="run.png" />
   <img id="loader" src="loader.png" style="display:none;" />
   <img id="success" src="success.png" style="display:none;" />
   <img id="fail" src="fail.png" style="display:none;" />
</div>
<div id="next" style="display:none;">
   ....
   ....
</div>

Answer 1

Does it accord with your question?

$('#run').hide();
$('#loader').fadeIn(1000);

$.ajax({
  type: 'POST',
  url: 'process.php',
  data: 'user=jolly',
  dataType: 'json',
  success: function (response) {
    $('#loader').stop(true).fadeOut(function () {
      if (response.status == 'success') {
        $('#success').fadeIn(1000, function () {
          $('#next').fadeIn(1000);
        });
      } else {
        $('#fail').fadeIn(1000);
      }
    });
  }
});