[英]Sliding down inputs with jQuery
所以我一直试图使用.slideDown()
向下滑动输入,但它似乎没有工作,除非我只是放在错误的地方。
我基本上想要在单击“添加字段”时向下滑动input_line
,而不是立即显示以获得更好的效果。
这是我的代码:
HTML:
<form action="javascript:void(0);" method="POST" autocomplete="off">
<button id="add">Add Field</button>
<div class='input_line'>
<input type="text" name="input_0" placeholder="Input1">
</div>
</form>
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));
});
});
我试过这个: $('form').append(blank_line.clone(true).slideDown());
有人能告诉我哪里出错了吗? 任何帮助将不胜感激。
您需要在使用slideDown()
显示元素之前隐藏元素。 slideDown
本质上是一个动画show
功能。 它们的行为相同:在已经可见的元素上调用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; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="javascript:void(0);" method="POST" autocomplete="off"> <button id="add">Add Field</button> <div class='input_line'> <input type="text" name="input_0" placeholder="Input1"> </div> </form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.