如何使用淡入淡出动画添加（克隆）div答案

【问题标题】：How to add (clone) div with fadein animation如何使用淡入淡出动画添加（克隆）div
【发布时间】：2013-07-03 09:24:21
【问题描述】：

类.my-row 的div 框包含ID 分别为#add-row 和#remove-row 的添加和删除按钮。 Jquery 用于在单击#add-row 按钮时克隆 div 框，并使用#remove-row 按钮删除 div 框。我想要在添加和删除 div 框时淡入和淡出动画。

HTML：

<div id="my-field">
   <div class="grey-field">

//box i want to clone 
  <div class="my-row">
  <a id ="add-row" class="button"></a>
  <a id ="remove-row" class="button"></a>
  </div>


   </div>
 </div>

jQuery

$('#add-row').on('click', function() {
        var row = $('.my-row').clone(true);
        row.removeClass('my-row');
        row.insertBefore('#my-field .grey-field>div:last');
        return false;
   });

 $('#remove-row').on('click', function() {
        $(this).closest("div").fadeOut(600, function(){
        $(this).remove();
        });
        return false;
    });

【问题讨论】：

老实说，您所描述的与我在代码中看到的不一样，您如何添加具有相同 id 的元素？你到底在克隆什么？这是一个行对象列表，不是您按类选择的对象。请将您的代码与 html 相关联
现在看看我的编辑！实际上我得到了克隆和删除的东西，甚至删除时的淡出动画，我想要帮助在克隆盒子时获得淡出动画
这仍然是错误的，但我猜浏览器正在处理错误，我会在几分钟内给你答案
提前感谢您指出我的错误！等待答复。

标签： jquery css jquery-animate

【解决方案1】：

js:

$('.add-row').on('click', function() {
    var row = $(this).parent().clone(true);
    row.removeClass('my-row').css('display','none'); // I suggest you don't remove the class here because you might need it later
    row.insertBefore('#my-field .grey-field>div:last').fadeIn('slow'); // here you are inserting before the last element, maybe that's how you want it
        return false;
   });

 $('.remove-row').on('click', function() {
        $(this).parent().fadeOut(600, function(){
        $(this).remove();
        });
        return false;
    });

html:

<div id="my-field">
   <div class="grey-field">
      <!--box I want to clone -->
      <div class="my-row">
          <a class ="button add-row">11</a>
          <a class ="button remove-row">22</a>
      </div>
   </div>
 </div>

DEMO

【讨论】：

感谢 CME64！--> 这对我有用！甚至@gomino 给出的答案也有效。代码只有两行不同。
和 cmets :P，我很高兴能帮上忙

【解决方案2】：

我在jsfiddle 中发布了我的答案

$('.add-row').on('click', function() {
    var row = $('.my-row').clone(true);
    row.removeClass('my-row');
    row.insertBefore('#my-field .grey-field>div:last').hide().fadeIn(600);
    return false;
});

$('.remove-row').on('click', function() {
    $(this).closest("div").fadeOut(600, function(){
    $(this).remove();
    });
    return false;
});

出于jQuery API 中所述的原因，我冒昧地将您的 id 引用更改为类标识符：

注意：使用 .clone() 的副作用是生成具有重复 id 属性的元素，这些属性应该是唯一的。在可能的情况下，建议避免使用此属性克隆元素或使用类属性作为标识符。

【讨论】：

感谢 gomino +1 ！很高兴使用淡入淡出获得 hide 方法！并且它非常有用的说明：在克隆任何 div 时在此处提供。

【解决方案3】：

如果我没看错你的问题，你想淡入任何带有 ID 的东西，而不是类，当你点击它时添加行和淡出 ID 删除行。 ID 用“#”表示，而类用“.”表示。检查您的 HTML 以确保它是一个类或 ID，因为这可能是它不起作用的原因

【讨论】：