動畫表單大小

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毫秒，文本的行數將擴展爲10行文本。

下面將初始化所有頁面的textarea元素：

$("textarea").expandable(); 

You can see a live example here.