Question

我有一个表单部分，用户可以在其中添加其他字段。当＆＃34;添加字段＆＃34;单击选项1下方的空格，然后延迟后，新添加的字段将淡入。我的字段不会淡入或向下滑动，并且没有延迟。一个空间，就是它。我做错了什么？

我的表格部分：

<div id="answers" style="display:none;">
    <div class="form-group" id="option1">
        <div class="col-xs-11 col-sm-9 col-md-6">
            <input class="form-control" id="answer" placeholder="Answer Option">
        </div>
        <div class="col-xs-1 col-sm-1 col-md-1" style="line-height:36px;">  <a href="" class="remove">Remove</a>

        </div>
    </div>
    <div>   <a href="" id="add">Add Field</a>

    </div>
</div>

我的jQuery：

$("#add").on("click", function (event) {
    event.preventDefault();
    var clone = $("#answers div:first").clone()
        .css({
        opacity: 0
    });

    $("#answers div:last").before(clone)
    //(clone).insertBefore("#adding")
    .slideDown('fast')
        .delay(300)
        .animate({
        opacity: 1
    }, {
        queue: false,
        duration: 'fast'
    });
});

Answer 1

您的链接是个问题：尝试：

$("#answers div:first").clone().css({
         opacity: 0
     }).insertBefore("#answers div:last").slideDown('fast', function () {
         $(this).animate({
             opacity: 1
         });
     });
});

<强> Fiddle

当你执行$("#answers div:last").before(clone)时，它会返回你的div，即添加按钮而不是克隆元素，我认为你正在延迟，以便在你设置不透明度动画之前完全滑下来，你可以使用完整的回调来实现slideDown的语法。

根据您的评论进行更新：

 $("#add").on("click", function (event) {
     event.preventDefault();
     $("#answers div:first").clone().css({
         opacity: 0,
         display:'none'
     }).insertBefore("#answers div:last").slideDown('slow').animate({
             opacity: 1
         });
 });

<强> Fiddle

jQuery：.slidedown（）然后fadeIn（）无法正常工作

1 个答案: