所以我一直在尝试使用 .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>
关于javascript - 使用 jQuery 向下滑动输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30280850/