1

我有这个用 jQuery 动画的搜索表单。.button问题是，当我在打开输入（类）后单击搜索图标（带有类）时.globalsearch_input，搜索不起作用，因为动画覆盖了搜索操作。

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)但没有用。

任何帮助表示赞赏。
谢谢！

4

1 回答 1

2

一种不需要解除绑定事件处理程序的可能方法是使用简单的类名条件。

例如，使用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");
    ...
});
于 2013-02-23T14:35:55.500 回答