web-dev-qa-db-ja.com

jQuery animate（）は、左右にスライドして要素を非表示および表示します

JQueryを使用して何かをアニメーション化しようとしています。

更新

思い通りに機能しています。これはjQueryです：

    $(document).ready(function() {

        // go chat button
        $('#go-chat input').click(function() {
            $('#search, #go-chat').animate({width: '0px'}, 1000, function() {
                    $(this).hide();
                    $('#login, #go-search').animate({width: '573px'}, 1000, function() {
                            $(this).show();
                        }
                    );
                }
            );
        });
        $('#go-search input').click(function() {
            $('#login, #go-search').animate({width: '0px'}, 1000, function() {
                    $(this).hide();
                    $('#search, #go-chat').animate({width: '573px'}, 1000, function() {
                            $(this).show();
                        }
                    );
                }
            );
        });
    });

ここでの問題は、スライドが発生するとテキストが折り返され、非常に醜いことです。幅を狭めたり広げたりするときに折り返さずに、テキストを検索バーおよび入力フィールドとしてスライドイン/アウトするようにするにはどうすればよいですか？

ありがとう。

古い質問

基本的に、検索バーを左側にスライドさせて、基本的に非表示にし、その下にある4つの入力をスライドアウトさせます。今のところ、それらを検索バーの下に配置しましたが、私の計画はそれらを非表示にすることです。そして「Go Chat」ボタンを押すと、検索が左にスライドアウトし、4つの入力が右にスライドインします。

現在、検索ボックスは中央にスライドし、完全には消えません。どうすれば思い通りに機能させることができますか？何を探しているのかわからない場合は、説明を求めてください。

ありがとう。

javascriptjqueryjquery-animateslide
12
Hristo

私はそれを考え出した。左にスライドさせるために、対応する周囲の<div>sに幅とmargin-left: 0px;を指定しました。次に、幅が狭く/広くなると、テキストの折り返しの問題が発生しました。これを修正するために、対応するwhite-space: nowrap;sのCSSに<div>を追加しました。

JQueryは次のとおりです。

$(document).ready(function() {
    $('#go-chat input').click(function() {
        $('#search, #go-chat').animate(
            {
                width: '0px'
            }, 1000, function() {
                $(this).hide();
                $('#login, #go-search').animate(
                    {
                        width: '573px'
                    }, 1000, function() {
                        $(this).show();
                    }
                );
            }
        );
    });
    $('#go-search input').click(function() {
        $('#login, #go-search').animate(
            {
                width: '0px'
            }, 1000, function() {
                $(this).hide();
                $('#search, #go-chat').animate(
                    {
                        width: '573px'
                    }, 1000, function() {
                        $(this).show();
                    }
                );
            }
        );
    });
});

...そしてCSS：

#search {
    border: 1px solid #999999;
    -moz-border-radius: 5px;
    width: 573px;
    height: 40px;
    margin: auto;
    margin-top: 100px;
    margin-left: 0px;
    position: relative;
}

#go-chat {
    width: 575px;
    margin: auto;
    margin-top: 36px;
    margin-left: 0px;
    padding-top: 5px;
    white-space: nowrap;
}

#login {
    border: 0px;
    width: 0px;
    display: none;
    margin: auto;
    margin-top: 100px;
    margin-left: 0px;
    position: relative;
}

#go-search {
    width: 0px;
    margin: auto;
    margin-top: 36px;
    margin-left: 0px;
    padding-top: 5px;
    white-space: nowrap;
    display: none;
}

私がjQueryをフォーマットした方法について提案がある場合は、私にあなたの考えを知らせてください...私がフォーマットした方法が好きですか？少しぎこちない感じです。

6
Hristo

変更してみてください

$('#search').animate({ 
                    width: '0px',
                }, 
                    '1000'
                );

に

$('#search').animate({ width: '0px' }, 1000, function() {
                $(this).hide();
             });

アニメーションが完了すると、要素は非表示になります。

また、「検索」テキストがうまくアニメーション化されていないことにも気付きました。アニメーションを行う前に、テキストを削除（またはフェードアウト）してみてください。元に戻すときは、もう一度表示してください。例えば：

$('#search-label').hide();

OR

$('#search-label').fadeOut();
15
g t
$('#search').animate({width: '0'}, 1000, function(){
    $(this).hide();
});

このページはトグルでおかしくなります...セレクタを気にしてください。

0
Squirkle