Question

我希望在用户首次选择输入表单的高度时为其设置动画。所以形式只说1行高，他们去输入它，它变成大约10行高。

Answer 1

这是'仅限css'的方式。

只需在文本区域使用：焦点选择器，并在焦点状态下更改textarea的高度

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/

Answer 2

首先，您要使用<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，折叠超时设置为200 ms，要扩展为的文本行数为10行文本。

以下内容将初始化页面中的所有textarea元素：

$("textarea").expandable();

You can see a live example here.

动画形式大小

2 个答案: