javascript - 使用 jQuery 向下滑动输入

Question

所以我一直在尝试使用 .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));
    });
});

JSFiddle

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

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

Answer 1

您需要在使用 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>