Jquery Animate overlapping on Loading Image
<p>I am working on a project in which the navigation does not really changes pages but gets data using services based on which navigation link I click and update data using jquery .html() method, I want to use a loader that shows up on clicking any link and hides the content, when ajax services is successfull i want to remove the loader and show back the content, but somehow the animations are overlapping causing animations to fail, </p>

<p>in example code here i am not using ajax to update my page but a simple button 
and jquery to update the data </p>

<pre><code>        &lt;body&gt;

        &lt;div id="loader"&gt;
            &lt;img src="loader.gif" alt=""&gt;
        &lt;/div&gt;

        &lt;br&gt;

        &lt;div id="content"&gt;
            This is the content
        &lt;/div&gt;

        &lt;input type="button" id="update" value="Update Data"&gt;




    &lt;/body&gt;

        &lt;script&gt;

        function showContent(){
      $('#loader').fadeOut(200).promise().done(function(){
           $('#content').fadeIn(200).promise().done(function(){
           });
      });
    }


    function hideContent(){
        $('#content').fadeOut(200).promise().done(function(){
           $('#loader').fadeIn(200).promise().done(function(){
           });
        });
    }

$("#update").click(function(){
    hideContent();
    $("#content").html("New Data");
    setTimeout(showContent(), 10000);

});



        &lt;/script&gt;
</code></pre>

<p>on clicking update, this should happen
content should disappear,
loader should appear,
update content, 
loader disappear,
content appear,</p>

<p>but i get both loader and content appeared in the end</p>

<p>I used setTimeout to give some delay but it doesnt works , i also used some flags earlier but that didnt work too . 
JsFiddle : <a href="https://jsfiddle.net/sea61L40/" rel="nofollow">JsFiddleLink</a></p>