jQuery Stop .blur() event when clicking “submit” button

Question

I am building a small landing page with a simple demo e-mail signup form. I want to have the form field open up when focused, and then shrink back down on blur.

However

Answer 1

It isn't the prettiest solution, but it does work. Try this:

$("#submitbtn").mousedown(function() {
    mousedownHappened = true;
});

$("#email").blur(function() {
    if (mousedownHappened) // cancel the blur event
    {
        mousedownHappened = false;
    }
    else // blur event is okay
    {
        $("#email").animate({
            opacity: 0.75,
            width: '-=240px'
        }, 500, function() {
        });

        // hide submit button
        $("#submitbtn").fadeOut(400);
    }
});​

DEMO HERE