2

ユーザーが最初に入力フォームを選択したときに、入力フォームの高さをアニメーション化したいと思います。つまり、フォームの高さは1行だけで、入力すると約10行になります。

4

2 に答える 2

1

「cssのみ」の方法は次のとおりです。

テキストエリアで :focus セレクターを使用し、フォーカスされた状態でテキストエリアの高さを変更するだけです

textarea{
    height:20px;
    width:150px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
}

textarea:focus{
    height:50px;
}

デモ: http://jsfiddle.net/NHZzt/

于 2013-03-10T13:38:29.223 に答える
0

まず、代わりに a を使用します。このようにして、属性<textarea/>で表示されるテキストの行数を操作できます。rowsあれは、

<textarea rows="10"></textarea>

10 行のテキストの要素を表示します。

アニメーションに関しては、.animate()テキストの行数を展開したり折りたたんだりしながらスムーズに遷移するメソッドを使用できます。

使いやすいようにjQueryプラグインにラップしました。

$.fn.expandable = function(){
    return this.each(function(){
        var $self = $(this);
        var isExpanded = false;
        var collapseTimeout;
        $self.on({
            focusin: function(evt) {
                if (isExpanded || evt.keyCode < 46 && evt.keyCode != 8 && evt.keyCode != 32) 
                    return true;
                isExpanded = true;
                clearTimeout(collapseTimeout);
                $self.stop(true).animate({
                    rows: 10
                }, "slow");
            },
            focusout: function() {
                collapseTimeout = setTimeout(function(){
                    $self.stop(true).animate({
                        rows: 1
                    }, "slow");
                }, 200);
                isExpanded = false;
            }
        });
    });
};

focusinイベント ハンドラーは要素を展開して、10 行のテキストを表示します。また、要素がフォーカスを失った後、表示を 1 行のテキストに変更するために設定された折りたたみタイムアウトもクリアされます。折りたたみタイムアウトは、focusoutイベント ハンドラーで設定されます。

アニメーション速度は に設定されslow、折りたたみタイムアウトは200ms に設定され、展開されるテキストの行数は行数に設定され10ます。

以下は、ページ内のすべてのtextarea要素を初期化します。

$("textarea").expandable();

ここで実際の例を見ることができます。

于 2013-03-10T12:34:05.307 に答える