Command ´show()´ does not work in the jquery submit a form?

The simplest example is when the user clicks submit, I want to show 开发者_如何转开发a div where it has a gif indicating that the message is being sent.

Javascript:

//Send mail
$("div.contato-pedidooracao form").submit(function () {

    $(".sending").show(); //HERE.. DONT WORK!!  why??
    $(".contato-pedidooracao form").hide(); //THIS WORKS!!

    var dataString = $(this).serialize();
    $.ajax({
        type: "POST",
        url: "Contato/SendMail",
        data: dataString,
        dataType: "json",
        success: function (data) {
            $(".sendMessage").empty();
            $(".sendMessage").append("<p>Mensagem enviada com sucesso</p>")
            $(".sendMessage").append("<p>Rezaremos por você!</p>")
            $(".sendMessage").show();
        },
        error: function (xhr, ajaxOptions, thrownError) {
            $(".sendMessage").empty();
            $(".sendMessage").append("<p>Ocorreu um erro ao tentar enviar a mensagem</p>")
            $(".sendMessage").append("<p>Por favor, tente novamente mais tarde.</p>")
            $(".sendMessage").show();
            $(".contato-pedidooracao form").show();
        }
    });
    $(".sending").hide();
    event.preventDefault();

});

HTML

<div class="content contato-pedidooracao">
    @using (Html.BeginForm())
    {
        <p>Conte-nos seu pedido</p>
        <div class="inline">
            @Html.Label("name", "Nome:")
            @Html.TextBox("name", "")
        </div>
        <div class="inline">
            @Html.Label("phone", "Telefone:")
            @Html.TextBox("phone", "", new { @class = "phone" })
            @Html.TextBox("cel", "", new { @class = "phone" })
        </div>
        <div class="inline">
            @Html.Label("email", "e-mail:")
            @Html.TextBox("email", "", new { @class = "email" })
        </div>
        <div class="inline">
            @Html.Label("message", "Mensagem:")
            @Html.TextArea("message", "")
        </div>
        <div class="submit">
            <input type="submit" value="Enviar" title="Enviar" />
        </div>
    }
    <div class="message sending">
        <p>Enviando mensagem</p>
        <img src="@Href("~/Images/ajax-loader.gif")" alt="Enviando..." />
    </div>
    <div class="message sendMessage"></div>
</div>

I do not know if it's relevant .. but part of the CSS:

div.column > div.contato-pedidooracao > div.message
{
    display:none;
}
.sending, .sendMessage
{
    text-align:center;
}

Processing takes an average of 5 seconds, but the div.sending does not appear in this time interval..

It's because AJAX is asynchronous, JS will not wait for it. So the $(".sending").hide(); placed after the AJAX, is actually executed right after the $(".sending").show();.

Try putting the $(".sending").hide(); at the end of your success and error functions in the AJAX.