Заменить div после формы отправить JQuery

Question

Я создал форму, которая, когда пользователь отправляет, форма #search div заменяется #loading div, который показывает загрузочное изображение. Пока все работает нормально.

Проблема, с которой я столкнулся, заключается в том, что я хочу, чтобы #loading div был заменен на # результат через 10 секунд после отображения #loading div.

Может кто-нибудь помочь с последними строками кода?

Здесь до сих пор:

<div id="search"> 
    <div id="search-area"> 
     <h1>Heading Here</h1> 
     <form id="target" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST"> 
      <input type="text" value="http://"/> 
      <input type="submit" value="Analyze"/> 
      <div class="clearfix"></div> 
     </form> 
    </div> 
    <div class="clearfix"></div> 
</div> 

<script> 
$("#target").submit(function(event) { 
    $("#search").slideUp("slow", function() { 
     $(this).replaceWith("<div id='loading'>" + 
           "<h2>Please be patient while<br/>" + 
           "we analyse your website.</h2>" + 
           "<img src='/images/progress.gif'/>" + 
          "</div>"); 
    }); 
    $("#loading").delay(10000).slideUp("slow", function(){ 
     $(this).replaceWith("<div id='results'>" + 
           "<h2>Here are the results</h2>" + 
          "</div>"); 
    }); 
    event.preventDefault(); 
}); 
</script> 

Answer 1

$("#target").submit(function (event) { 

    $("#search").slideUp("slow", function() {    
     $(this).replaceWith("<div id='loading'><img src='/images/loading.gif'/></div>");    
    }); 

    setTimeout(function() { 
     $("#loading").slideUp("slow", function() { 
      $(this).replaceWith("<div id='done'>Done!</div>"); 
     }); 
    }, 10000); 

    event.preventDefault(); 

}); 

Answer 2

Загрузочный ДИВ не доступен, пока после первой анимации отделки, вторая анимация должна быть внутри обратного вызова:

$("#target").submit(function (event) { 
    $("#search").slideUp("slow", function() { 
     $(this).replaceWith("<div id='loading'>" + 
      "<h2>Please be patient while<br/>" + 
      "we analyse your website.</h2>" + 
      "<img src='/images/progress.gif'/>" + 
      "</div>"); 
     $("#loading").delay(10000).slideUp("slow", function() { 
      $(this).replaceWith("<div id='results'>" + 
       "<h2>Here are the results</h2>" + 
       "</div>"); 
     }); 
    }) 
    event.preventDefault(); 
}); 

DEMO