0

デフォルト値として「Web サイトを検索...」というテキストを含む入力テキスト フィールドがあります。

ユーザーがクリックすると、テキストが空白のボックスにフェードアウトし、検索クエリの準備が整います。

ユーザーがクリックアウトすると、デフォルトのテキストがフェードインします。

これは正常に機能しますが、唯一の問題は、入力フィールド全体が BORDER と Background を含めてフェードしていることです。だから私の質問は：

テキストだけをアニメーション化することはできますか？

これを実現するコードは次のとおりです。

        <fieldset id="siteSearch">
            <input type="text" class="siteSearchField" value="Search the website..." maxlength="50"><input type="image" class="siteSearchBtn" src="header_search_btn.gif" alt="search">
            <script>
                var defaultText = $('.siteSearchField').val();
                $('.siteSearchField')
                .focus
                (
                    function()
                    {
                        $(this)
                        .animate
                        (
                            {'opacity': 0}, 287,
                                function()
                                {
                                    $(this).val('');
                                }
                        )
                        .animate
                        (
                            {'opacity': 1}, 287
                        );
                    }
                )
                .focusout
                (
                    function()
                    {
                        $(this)
                        .animate
                        (
                            {'opacity': 0}, 287,
                                function()
                                {
                                    $(this).val(defaultText);
                                }
                        )
                        .animate
                        (
                            {'opacity': 1}, 287
                        );
                    }
                );
            </script>
        </fieldset>

私はjQueryに比較的慣れていないので、どんな助けでも大歓迎です。

4

4 に答える 4

0

あなたのコードで：

$(this).animate( {'opacity': 0}, 287, /*callback*/ );

入力フィールド全体を（境界線とともに）アニメーション化します。

フェードイン/フェードアウトするものと、決して動かない境界線を描く何かが必要です。

これを行う途中：

  • あなたのinput中に入れてspan
  • に境界線を置き、spanからすべての境界線を削除しますinput
  • 現在のfocusin / focusoutハンドラーを保持する
于 2013-10-11T08:57:42.863 に答える
0

テキスト フィールドを div でラップし、入力のようにスタイルを設定して、背景や境界線なしのままにすることができます。

于 2013-10-10T09:43:14.683 に答える