jQuery学习笔记8——多行文本框高度变化

 1 <! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
 2 < html xmlns = " http://www.w3.org/1999/xhtml " >
 3 < head >
 4 < meta http - equiv = " Content-Type "  content = " text/html; charset=utf-8 "   />
 5 < title > 多行文本框高度变化 </ title >
 6 < script type = " text/javascript "  src = " jquery-1.2.6.min.js " ></ script >
 7 < script type = " text/javascript " >
 8     $(document).ready(function() {
 9        var $comment = $("#comment");//获取评论框
10        $(".bigger").click(function(){//判断是否处于动画
11            if(!$comment.is(":animated")){
12                if($comment.height()<500){
13                $comment.animate({height:"+=50"},400);
14                }            
15            }            
16        });//“放大”按钮绑定单击事件
17        $(".small").click(function(){//判断是否处于动画
18            if(!$comment.is(":animated")){
19                if($comment.height()>50){
20                $comment.animate({height:"-=50"},400)
21                }    
22            }            
23        });//"缩小"按钮绑定单击事件
24    } )    
25 </ script >
26 < style type = " text/css " >
27 .msg_caption span { background:#ccc; display:inline-block; width:60px; text-align:center; height:28px; line-height:28px; cursor:pointer;}
28 </ style >
29 </ head >
30 < body >
31 < form >
32 < div  class = " msg " >
33      < div  class = " msg_caption " >
34          < span  class = " bigger " > 放大 </ span >
35          < span  class = " small " > 缩小 </ span >
36      </ div >
37      < div >
38          < textarea id = " comment "  rows = " 8 "  cols = " 20 " >
39             多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框多行文本框高度变化，多行文本框高度变化，多行文本框
40          </ textarea >
41      </ div >
42 </ div >
43 </ form >
44 </ body >
45 </ html >

转载于:https://www.cnblogs.com/guopei/articles/1523575.html