1

検索アイコンをクリックすると、検索入力がフェードインし、クラスを追加して幅を広げるアニメーションを作成しようとしています。問題は、既に表示されている検索入力の後の 2 回目のクリックでフェードアウトする方法がわからないことです。

これは私のコードです:

    $('#menu_search').click(function(){
        $('.search_input').fadeIn().toggleClass('full');
    });


    <li id="menu_search">
        <a href="javascript:void(0)"></a>
        <div class="search_input_container">
            <input type="text" class="search_input" value="Buscar">
        </div>
    </li>


        &#menu_search{
            background: url('../img/sprites.png') #000 2px 2px;
            width: 34px;
            height: 28px;
            padding: 0;
            margin-right: 0;
            a{
                display: inline-block;
                width: 100%;
                height: 100%;
            }
            .search_input_container{
                width: 500px;
                height: 30px;
                position: absolute;
                z-index: 20;
                left: -466px;
                .search_input{
                    float: right;
                    width: 100px;
                    background: #ffffff;
                    height: 30px;
                    border: none;
                    .round_corners();
                    .animate();
                    display: none;
                    &.full{
                        width: 772px;
                        display: block;
                    }
                }
            }
        }
4

2 に答える 2

4

fadeTogglejQueryにもあります。これを試して：

$('#menu_search').click(function(){
    $('.search_input').fadeToggle().toggleClass('full');
});
于 2013-03-07T11:10:09.413 に答える
1

常に 2 回目のクリックである場合は、fadeToggle()代わりに使用する必要があります。

于 2013-03-07T11:10:38.017 に答える