Show / hide jQuery not working with Ajax

Question

Hi I have a problem with the following code: I can not hide the download. I tried Mozilla, Chrome, and it only works when you paste it into the console. Html startup boot

<div class="loading" style="display: none">

After .show

<div class="loading" style="display: block;">

Ajax

$.ajax({
    url: "/uzemnenie",
    cache: false,
    async: true,
    dataType: "html",
    success: function (data) {
        console.log("in ajax ", data.slice( 0, 100 ));
        $('.content').empty().html(data);
    }
});

Webpage Code

$( document ).ajaxStart(function() {
    $(".content").fadeOut( "slow", function() {
        $(".loading").show().css("display", "block");
    });
});

$( document ).ajaxStop(function() {
    $(".loading").hide();
    $(".content").fadeIn("slow", function() {
        $('#show').fadeIn("slow");
    });
});

It works only when:

$( document ).ajaxStop(function() {
                $(".loading").css("display", "none");
                $(".content").fadeIn("slow", function() {
                    $('#show').fadeIn("slow");
                });
            });

Strange Part - Content Added Too

                $( document ).ajaxStop(function() {
                $(".loading").hide(function(){
                $(".content").fadeIn("slow", function() {
                    $('#show').fadeIn("slow");
                });
                });
            });

And the content is displayed correctly. Thanks for answers.

Answer 1

, , . ajax , . - , ajaxStart, , . , , ajaxStop, show/hide, ajaxStart. . - setTimeout().

jsfiddle.

$(document).on({
  ajaxStart: function() { 
                    $(".content").fadeOut("slow");
                    $(".loading").show();
  },
  ajaxStop: function() {
      setTimeout(function() { 
                     $(".loading").fadeOut("slow");
                     $(".content").show("slow");     
                  }, 1500);                                        
  }    
});

Answer 2

ajax

$(".loading").show().css("display", "block");

.

$(".loading").hide().css("display", "none");