搜索表單不能與jQuery動畫

Question

我有this search form動畫與jQuery。問題是，當我在輸入（類.globalsearch_input）打開後點擊搜索圖標（類.button）時，搜索不起作用，因爲動畫覆蓋搜索操作。

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; 
    }); 
}); 

如何停止的.button動畫在此之後打開輸入？
我試過.attr('disabled', true)但不起作用。

任何幫助表示讚賞。
謝謝！

Answer 1

不需要解綁定事件處理程序的一種可能方式是使用簡單的classname conditional。

例如，使用expanded類名添加到按鈕，

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"); 
    ... 
});