Question

我正在尝试设置文本输入高度的动画。我可以排序通过焦点上的animate（）来实现这一点，并在模糊上删除。问题是，当我想同时移动底部和顶部时，它只会移动底部边框。

$(document).ready(function(){
     $("input[type=text]").on("focus", function(){
          $(this).animate({height:40}, 200);
           }).blur(function(){
          $(this).animate({height:10}, 200);
          })
      });

此处代码：Codepen

Answer 1

你可以单独用CSS做这个，如果你愿意的话也不用javascript。

在下面的示例中，我将输入放入居中的柔性框中，只是为了让高度垂直向上和向下扩展。将变换原点Y轴设置为50％可确保何时更改它，从中心开始，并且不会“向下”增长。该示例略有夸大，您需要根据需要进行调整。

<div id="formWrapper">
<input type="text" />
</div>

('TOILET','TOILETS','AIR CONDITIONING','AIR-CONDITIONINGS','AIR-CONDITIONING')

动画文本输入高度

1 个答案: