Animated gif during script processing - php

Question

I have a script called notify_me.php which I run like so:
script type="text/javascript">
//Run notify_me.php script
$(document).ready(function(){
$("#submit").click(function(){
var d = $('form').serialize();
$.get('php/notify_me.php',d,function(data){
$(".container").html(data);
});
});
});
</script>
and I would like to show a animated loading .gif until the script is printed. The code for that is :
<div class="search_load" >
<span class="searching_font"> Fetching your flight prices...</span><br/><br/>
<img src="images/searchloading.gif">
</div>
How can I write a function that shows the .search_load class during the processing of notify_me.php. The .search_load class should also be shown in the .container div.
Tried some different ways with append(); and appendTo(); but can't seem to get it working.
Appreciate your help on this!
EDIT: I got the .search_load div to show the first time I hit the #submit. The second time it doesn't show att all. This is the problem I'm trying to solve. Any ideas?!
SOLUTION: Guys, I solved it by looking in to #Rohan's link. Check out below. Thank you all!
$(document).ready(function(){
$("#submit").click(function(){
$('#info').show();
$('html,body').animate({scrollTop: $("#info").offset().top},'slow');
$('.container').after('<div class="search_load"></div>');
var d = $('form').serialize();
$.get('php/notify_me.php',d,function(data){
$(".container").html(data);
$('.search_load').hide();
});
});
});

Answer 1

$(document).ready(function(){
$('.search_load').hide();
$("#submit").click(function(){
var d = $('form').serialize();
$('.search_load').show();
$.get('php/notify_me.php',d,function(data){
$('.search_load').hide();
$(".container").html(data);
});
});
});
You can also hide the div with CSS, so you can remove the line #2: $('.search_load').hide();

Answer 2

Steps:
Make your loading div hidden
When loading starts, display it using .show() and modifying the CSS so that its placement is correct
OnLoaded -> div.hide()
Refer to this: How to show waiting message during sync ajax call in browser

Answer 3

jQuery(document).ready(function($) {
$("#submit").click(function(){
$(".search_load").show();
var d = $('form').serialize();
$.get('php/notify_me.php', d, function(data) {
$(".container").html(data);
$(".search_load").hide();
});
});
});

Answer 4

try this:
$('div.search_load').hide();
$('#submit').click(function() {
$('div.search_load').show();
var d = $('form').serialize();
$.get('form.php', d,
function(data) {
$('div.search_load').hide();
$('.container').html(data);
},
'html');
return false;
});

Answer 5

Try This:
Javascript:
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
var d = $('form').serialize();
$(".search_load").show();
$.get('php/notify_me.php',d,function(data){
$(".container").html(data);
$(".search_load").hide();
});
});
});
</script>
HTML Changes:
<div class="search_load" style="display:none" >
<span class="searching_font"> Fetching your flight prices...</span><br/><br/>
<img src="images/searchloading.gif">
</div>
Hope this will work.