Question

我想在add / removeClass和clone / remove元素中添加动画（可能相同）。对于add / removeClass函数，我尝试使用bootstrap类＆＃34;淡入＆＃34; （没有成功）。对于克隆/删除元素，我尝试使用hide / show（仅成功删除）

HTML

<!-- CLONE BTN -->
<div class="row cust-gutters">
    <div class="col-md-12">
        <span id="cloneRow" class="label label-primary pointer">
            Add <span class="glyphicon glyphicon-plus"></span>
        </span>
    </div>
</div>

<div class="clonable-row-label hide fade">
    <div class="row">
        <div class="col-md-4">
            <label class="control-label" for="phone">Phone</label>
        </div>
    </div>
</div>
<div class="clonable-row hide fade">
    <div class="row">
        <div class="col-md-4">
            <div class="input-group">
                <input type="text" class="form-control input-sm" name="phone[]" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-trash deleteRow" aria-hidden="true"></span>
                </span>
            </div>
        </div>
    </div>
</div>

JS

$("#cloneRow").on('click', function() {
    var num = $(".clonable-row").length;
    if($(".clonable-row:first").hasClass("hide")) {
        $(".clonable-row:first, .clonable-row-label").addClass("in");
        $(".clonable-row:first, .clonable-row-label").removeClass("hide");
    } else {
        if(num < 4) {
            //var row = $('.clonable-row:first').clone(true);
            //row.insertAfter('.clonable-row:last').show().fadeIn(600);
            $(".clonable-row:first").clone(true).insertAfter(".clonable-row:last");
        }
    }
});

$(".deleteRow").on('click', function() {
    var num = $(".clonable-row").length;
    if(num == 1) {
        $('.clonable-row-label').addClass("hide").removeClass("in");
        $(this).closest('.clonable-row').addClass("hide").removeClass("in");
    } else {
        $(this).closest('.clonable-row').hide(600, function() {
            $(this).closest('.clonable-row').remove();
        });
    }
});

我怎么能这样做？谢谢

JSFIDDLE

Answer 1

您应该使用：

$（ “可克隆行：第一 ”）克隆（真）.insertAfter（“ 可克隆行：最后”）。隐藏（）淡入（600）;

Answer 2

jQuery UI提供.addClass()和removeClass()的动画版本。

至于显示元素时的动画，你应该使用 fadeIn（）。请注意，fadeIn（）ALREADY显示（）这样的元素，所以像$（element）.show（）这样的东西.fadeIn（）是没有意义的，因为当fadeIn（）开始时，元素将会显示，并且$（元素）.fadeIn（）。show（）也没有意义，因为fadeIn（）在完成时已经完全显示元素。

以下代码段的问题是概念性的：

$(this).closest('.clonable-row').hide(600, function() {
    $(this).closest('.clonable-row').remove();
});

应该这样：

$(this).closest('.clonable-row').hide(600, function() {
    // Note here that $(this) is already the element (jQuery-wrapped) you called .hide() on
    $(this).remove();
});

修改

对于您的特定情况，插入克隆元素，您应该在将其插入HTML之前将其隐藏：

$(".clonable-row:first").clone(true).hide().insertAfter(".clonable-row:last").fadeIn();

Jquery添加动画以添加/ removeClass和克隆/删除元素

2 个答案: