使用jQuery向下滑动输入

所以我一直在尝试使用.slideDown()向下滑动输入，但它似乎没有用，除非我只是放在错误的地方。

我基本上想要在单击“添加字段”时向下滑动input_line ，而不是立即显示以获得更好的效果。

这是我的代码：

HTML：

 
 Add Field 
  
  

JQUERY：

 jQuery(document).ready(function () { 'use strict'; var input = 1, blank_line = $('.input_line'); $('#add').click(function () { $('form').append(blank_line.clone(true)); $('.input_line').last().before().before($(this)); }); }); 

的jsfiddle

我试过这个： $('form').append(blank_line.clone(true).slideDown());

有人能告诉我哪里出错了吗？ 任何帮助将不胜感激。

Answer 1

您需要在使用slideDown()显示元素之前隐藏元素。 slideDown本质上是一个动画showfunction。 它们的行为相同：在已经可见的元素上调用show不会做任何事情。

此外，可以通过将按钮保持在原位并将其更改为绝对定位来对按钮进行动画处理。

 jQuery(document).ready(function () { 'use strict'; var input = 1, blank_line = $('.input_line'); $('#add').click(function () { var newElement = blank_line.clone(true).hide(); $('form').append(newElement); newElement.slideDown(); }); }); 

 #add { position:absolute; bottom: 0; left: 0; } .input_line { margin-left: 70px; } form { position:relative; } 

  
 Add Field