Question

简单的问题，但我无法弄清楚这里有什么。

我有一个textarea，当用户点击它时我会展开它。扩展工作a-ok。但是，在扩展后，我无法使用鼠标将其重新调整为原始大小，我只能将其重新调整为在animate之后停止的尺寸

textarea的

<textarea placeholder="Click me!"></textarea>

代码

myTextArea.on('click', function() {
  myTextArea.animate({
    'height': '150px'
  }, 'slow'));

Here's a fiddle showing the problem in action

想到可能某种方式min-height属性被animate方法（或其他东西）所破坏，我尝试在动画后手动重置它

myTextArea.on('click', function() {
  myTextArea.animate({'height': '150px'}, 'slow');
  myTextArea.css('min-height': '10px');
);

但是，唉，没有运气。谁知道我哪里出错了？？

Answer 1

试试这个：在css中我们使用,而不是:。

＆＃13;

	  $('textarea').animate({'height':'150px'}, 'slow');
        var  minheight = parseInt($('textarea').css('min-height'));
        console.log(minheight);
  	$('textarea').on('click', function() {
  		  	       $(this).animate({'height': '100px'}, 'slow');
	              $(this).css('min-height',minheight+'px');
  	});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea placeholder="Click me!"  style="min-height:20px;"></textarea>

＆＃13;

Answer 2

当且仅当用户已使用拖动处理程序调整大小时，它才能调整回原始最小高度。

没有事件可以处理textarea的大小调整。无法使用.trigger()来模拟它。用户必须这样做。

看来这是textareas的一个已知问题。您可以通过检查textarea的style.width和style.height属性来检测用户是否已完成此操作，但您无法强制它按照您希望的方式运行事先使用传统活动。

如果您确实需要此功能，请尝试使用Resizeble插件。它用自己更强大的处理程序覆盖默认的textarea resize函数。您也可以使用类似的想法创建自己的调整大小处理程序。

使用jquery的动画后，无法将textarea重新调整为原始大小？

2 个答案: