Search form doesn't work with jquery animation

Question

I have this search form animated with jQuery. The problem is that when i click on search icon (with class .button) after the opening of the input (class .globalsearch_input) the search doesn't work because the animation override search action.

HTML:

<div id="header">
        <div class="wrapper-simple">
            <form method="get" action="">
                <input type="hidden" value="">
                <input type="text" value="" class="globalsearch_input" placeholder="Search...">
                <input type="submit" value="" class="globalsearch_submit" >
                <button type="submit" value="" class="globalsearch_submit button"></button>                  
            </form>
        </div>
    </div>

jQuery:

$(document).ready(function() {
    $('.wrapper-simple button.globalsearch_submit').click(function(){
        $('#statistics').hide();
        $('.wrapper-simple').animate({'width':'275px'})
            .end().find('.wrapper-simple input[type=text]').css({opacity: 0, visibility: "visible"}).animate({'width': '231px', opacity: 1}) 
            .end().find('.wrapper-simple .button').animate({ 'right': '30px' })//.attr('disabled', false)   
            .end().find('.wrapper-simple input[type=submit]').css({'background': 'url("close.png") no-repeat center'}).animate({'marginLeft':'235px', opacity: 1}, 10).hover(function() {
                $(this).addClass('close-hover');
            }, function() {
                $(this).removeClass('close-hover');
            }); 
        return false;
    }); 
    $('.wrapper-simple input[type=submit]').click(function() {
        $('#statistics').show();
        $('#statistics').delay(500).css('opacity',0).show().animate({opacity:1},100); 

        $('.wrapper-simple').animate({'width':'40px'}) 
            .end().find('.wrapper-simple input[type=text]').animate({'width': '1px', opacity: 0})
            .end().find('.wrapper-simple .button').animate({ 'right': '0' })//.attr('disabled', true)
            .end().find('.wrapper-simple input[type=submit]').animate({'marginLeft':'0', opacity: 0}).attr('value', ''); 
        return false;
    });
});

How can I stop the animation of the .button after this opened input?
I have tried with .attr('disabled', true) but doesn't work.

Any help is appreciated.
Thank you!

Answer 1

One possible way that won't require unbinding event handlers is using a simple classname conditional.

For example, using a expanded classname added to the button,

var $globalsearch_submit = $('.wrapper-simple button.globalsearch_submit');

$globalsearch_submit.click(function(){
    if($globalsearch_submit.hasClass("expanded")) {
        /* Process form's submit */
        return true;
    }
    $globalsearch_submit.addClass("expanded");
    ...
}); 

$('.wrapper-simple input[type=submit]').click(function() {
    $globalsearch_submit.removeClass("expanded");
    ...
});