1

この検索フォームをjQuery でアニメーション化しました。.button問題は、入力 ( class ) を開いた後に検索アイコン ( with class ) をクリックする.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

イベント ハンドラーのバインドを解除する必要がない 1 つの考えられる方法は、単純なクラス名条件を使用することです。

たとえば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 に答える