Question

包含.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;
    });

Answer 1

我在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;
});

我冒昧地将您的ID引用更改为类标识符，而不是jQuery API中所述的原因：

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

Answer 2

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

Answer 3

如果我正确地阅读你的问题，你想要淡入任何ID，而不是类，当你点击它时添加行和淡出ID删除行。 ID用“＃”表示，而类用“。”表示。检查您的HTML以确定它是否是类或ID，因为这可能是它无法正常工作的原因

如何使用fadein动画添加（克隆）div

3 个答案: