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

我想向add/removeClass和clone/remove元素添加一个动画（可能相同）。对于add/removeClass函数，我尝试使用引导类“fade-in”（没有成功）。对于克隆/删除元素，我尝试使用隐藏/显示（仅成功删除）

HTML

添加
电话

JS

$（“#cloneRow”）。在（'click'，function（）上{
var num=$（“.clonable行”）.length；
if（$（“.clonable行：第一”）.hasClass（“隐藏”））{
$（“.clonable行：第一，.clonable行标签”）.addClass（“in”）；
$（“.clonable行：第一，.clonable行标签”）.removeClass（“隐藏”）；
}否则{
if（num<4）{
//var row=$（'.clonable row:first'）.clone（true）；
//row.insertAfter（'.clonable row:last'）.show（）.fadeIn（600）；
$（“.clonable行：第一个”）.clone（true）.insertAfter（“.clonable行：最后一个”）；
}
}
});
$（“.deleteRow”）。在（'click'，function（）上{
var num=$（“.clonable行”）.length；
如果（num==1）{
$（'.clonable行标签'）.addClass（“隐藏”）.removeClass（“in”）；
$（this）.closest（'.clonable行'）.addClass（“hide”）.removeClass（“in”）；
}否则{
$（this）.closest（'.clonable行'）.hide（600，function（）{
$（this）.closest（'.clonable行'）.remove（）；
});
}
});

我怎么做呢？ 多谢各位

您应该使用：

---

$（.clonable row:first”）.clone（true）.insertAfter（“.clonable row:last”）.hide（）.fadeIn（600）

jQuery UI提供和的动画版本

至于显示元素时的动画，您应该使用fadeIn（），正如您所做的那样。请注意，fadeIn（）已经显示（）这样的元素，因此执行类似$（element）.show（）.fadeIn（）的操作是毫无意义的，因为当fadeIn（）开始时，该元素将已经显示，而$（element）.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();

---

我在第二次迭代中做了一个测试（我在else中添加了我的测试）：现在克隆动画非常完美！但是我仍然对jquery ui Tnahk的add/removeclass的动画有问题：fiddle的第18行将hide类添加到一个div中，该div是您正在选择的.clonable行标签的容器：

$（this）.closest（'.clonable行'）.addClass（“hide”）这里的问题是，当.clonable行标签上的动画.addClass（）尚未完成时，外部div将立即隐藏。该行应该位于对.addClass（）的动画调用的回调（完成时）中。
$(this).closest('.clonable-row').hide(600, function() {
    // Note here that $(this) is already the element (jQuery-wrapped) you called .hide() on
    $(this).remove();
});

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