Another jQuery text animation

jQuery animate() based animation on a form input button. On Click on the button, we hide this button, display a message ("ok") for 3000 ms and hide this message to show again the button. The message can be an Ajax response.

by Fabien BĂ©nariac

HTML

<input type="text" name="email" id="email" />
<a href="javascript:;" id='send'>SEND</a>
<p id="statusAjax"> </p>

CSS

#statusAjax {display: none;}

JavaScript

$("#email").css('color', 'black');


$("#send").click(function() {
    $("#statusAjax").html('Sent');
    $("#send").animate({
        height: 'hide'
    }, 500, function() {
        $("#statusAjax").animate({
            height: 'show'
        }, 1000, function() {
            $("#statusAjax").animate({
                display: 'block'
            }, 3000, function() {
                $("#statusAjax").animate({
                    height: 'hide'
                }, 500, function() {
                    $("#send").animate({
                        height: 'show'
                    }, 1000);
                });
            });
        });
    });
});