javascript代码，用于调整textarea的大小，并对焦点增益产生动画效果_Javascript_Jquery_Html_Css_Animation

javascript代码，用于调整textarea的大小，并对焦点增益产生动画效果

javascript jquery html css animation

javascript代码，用于调整textarea的大小，并对焦点增益产生动画效果,javascript,jquery,html,css,animation,Javascript,Jquery,Html,Css,Animation,我正在使用web应用程序，当textarea获得焦点时，我想用动画效果调整textarea的大小（平滑调整大小）我试着按照下面的代码调整textarea的焦距，但它不能平滑地调整大小 <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type='text/jav

我正在使用web应用程序，当textarea获得焦点时，我想用动画效果调整textarea的大小（平滑调整大小）

我试着按照下面的代码调整textarea的焦距，但它不能平滑地调整大小

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type='text/javascript'>
         function abc()
         {
           $('#txt').attr('rows',15);
         }
    </script>
</head>
<body>

<textarea id='txt' rows="4" onfocus='abc();' cols="50">
this is testing of textrea
</textarea>

</body>
</html>


函数abc（）
{
$（'#txt'）.attr（'行'，15）；
}
这是对textrea的测试

试试这个：

function abc()
{
       $('#txt').animate({'height':"+=100px"}, 400);
}

你可以将高度切换到你想要的任何高度。。+=100是相对的，会将文本区域的高度增加100px

也可以作为外部事件处理程序

$("#txt").bind("focusin",function abc(){
       $('#txt').animate({'height':"+=100px"}, 400);
});

希望对你有所帮助试试这个

$('#txt').focus(function() {
    $('#txt').animate({
        width: 500,
        height: 200
  }, 1000);
});

$('#txt').blur(function() {
    $('#txt').animate({
        width: 160,
        height: 48
  }, 1000);
});

例如：

有关$.animate（）的更多信息，请参阅jQuery API文档中的此页

如果您不需要对IE9和旧版本的支持，纯CSS可以解决您的问题

#txt {
    height:80px;
    transition: all 2s;
    -webkit-transition: all 2s; /* Safari */
}
#txt:focus {
    height:300px;
}

试试这个

 $('textarea.expand').focus(function ()
          {
               $(this).animate({ height: "4em" }, 500); 
          });

for more information check 

  "http://jsfiddle.net/Y3rMM/"

我想出了一个不同的答案，通过这种方式，它可以自动调整文本区域中内容量的大小，而不是固定的高度

$('#txt').focus (function() {
    $(this).animate({
        height: $(this)[0].scrollHeight 
  }, 200);
});

$('#txt').blur(function() {
  $('#txt').animate({
    height: 40
  }, 200);
});

示例：

标题是否应该是“jQuery代码调整文本区域大小，并在焦点获得时产生动画效果”？您需要支持哪些浏览器？由于CSS转换和

：focus

伪类，如果您支持的列表是现代的，您可以完全使用CSS来实现这一点。至于@ChrisHardie所说的，我在答案中有这个例子。其他人已经展示了改变高度的示例，但是如果您喜欢的话，您可以设置行动画：

$（'#txt'）。动画（{rows:15}，500）

对于使用此解决方案的用户，请确保在

文本区域中指定默认高度

-如果没有默认高度，动画将无法工作。