Try re-ordering, note I've also amended the html to make it work with IE.
<div id="fade" class="fade" style="display: none; text-align: center; z-index: 9999999999;">
<img src='@Url.Content("~/images/loadingg3.gif")' style="opacity: inherit; filter: inherit; top: 60%; position: fixed; left: 1%;" width="150" height="150" />
</div>
<form id="myform" action="/home/GetData" method="post">
<input type="text" name="MyText" />
<input type="submit" value="Submit" />
</form>
<a href="#" id="process">Process</a>
<script type="text/javascript">
$("#myform").on("submit", function (event) {
event.preventDefault();
$('#fade').fadeTo('slow', 0.7);
var url = $(this).attr("action");
var formData = $(this).serialize();
$.ajax({
url: url,
type: "POST",
data: formData,
dataType: "json",
success: function (resp) {
$("#fade").hide();
alert(resp.result);
}
})
});
$('#process').click(function () {
$('#myform').submit();
});
</script>
Controller
public ActionResult GetData(FormCollection form)
{
System.Threading.Thread.Sleep(3000);
return Json(new { result = form["MyText"] });
}