Question

我问过一个与之前相关的问题，但那个回答的人并没有真正解释他的答案很好。

当您点击“重复”字样时我的表单上的按钮，我希望输入字段向下滑动而不是只是出现。

他说你必须在使用hide()函数之前使用slideDown()函数隐藏元素，这是正确的吗？

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"><input type="button" class="duplicate" value="duplicate">
    </div>
</form>

JQUERY：

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();
    });

    $('form').on('click', '.duplicate', function () {
        $(this).parent().after($(this).parent().clone());
        $('.input_line').last().before($('#add'));
        input = input + 1;
    });
});

小提琴更新。的 JSFiddle

最简单的方法是什么？

Answer 1

使用.insertAfter()

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();
    });

    $('form').on('click', '.duplicate', function () {
        $(this).parent().clone().hide().insertAfter($(this).parent().after()).slideDown();
        $('.input_line').last().before($('#add'));
        input = input + 1;
    });
});

JsFiddle Section 6.1.2 User-controlled Memory

希望它可以提供帮助。

Answer 2

在使用之前必须使用hide（）函数隐藏元素 slideDown（）函数，这是正确的吗？

在 7614-7626 行中查看jQuery版本1.11.3来源; $.fn.slideDown()，$.fn.slideUp()似乎分别是.show()，.hide()的别名

// Generate shortcuts for custom animations jQuery.each({ slideDown: genFx("show"), // <- slideUp: genFx("hide"), // <- slideToggle: genFx("toggle"), fadeIn: { opacity: "show" }, fadeOut: { opacity: "hide" }, fadeToggle: { opacity: "toggle" } }, function( name, props ) { jQuery.fn[ name ] = function( speed, easing, callback ) { return this.animate( props, speed, easing, callback ); }; });

使用jQuery slideDown函数时，是否需要始终隐藏元素？

2 个答案: