使用jQuery向下滑动输入 [英] Sliding down inputs with jQuery

问题描述

因此，我一直尝试使用.slideDown()向下滑动输入，但除非我只是将其放在错误的位置，否则它似乎无法正常工作.

So I have been trying to make an input slide down using .slideDown() but it doesn't seem to be working, unless I'm just putting in in the wrong place.

我基本上是希望input_line在您单击添加字段"时向下滑动，而不是立即显示以获得更好的效果.

I'm basically wanting the input_line to slide down when you click 'Add Field' instead of just appearing instantly for a nicer effect.

这是我的代码:

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

JSFiddle

我已经尝试过了: $('form').append(blank_line.clone(true).slideDown());

有人可以告诉我我要去哪里错吗?任何帮助将不胜感激.

Could someone tell me where I'm going wrong? Any help would be greatly appreciated.

推荐答案

在使用slideDown()显示元素之前，您需要隐藏该元素. slideDown本质上是一个动画的show函数.它们的行为相同:在已经可见的元素上调用show不会执行任何操作.

You need to hide the element before showing it with slideDown(). slideDown is essentially an animated show function. They behave the same: calling show on an already visible element does nothing.

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

Additionally the button can be animated by keeping it where it is and changing it to be absolutely positioned.

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>

这篇关于使用jQuery向下滑动输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！