title: How to add (clone) div with fadein animation
body: <p>A div box with class <code>.my-row</code> contain add and remove button with ID <code>#add-row</code> and <code>#remove-row</code> respectively. Jquery is used to clone div box on click over <code>#add-row</code> button and to remove div box using <code>#remove-row</code> button. I want fadein and fade-out animation while adding and removing div box. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="my-field"&gt;
     &lt;div class="grey-field"&gt;
  
  //box i want to clone 
    &lt;div class="my-row"&gt;
    &lt;a id ="add-row" class="button"&gt;&lt;/a&gt;
    &lt;a id ="remove-row" class="button"&gt;&lt;/a&gt;
    &lt;/div&gt;
  
  
     &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$('#add-row').on('click', function() {
          var row = $('.my-row').clone(true);
          row.removeClass('my-row');
          row.insertBefore('#my-field .grey-field&gt;div:last');
          return false;
     });
  
   $('#remove-row').on('click', function() {
          $(this).closest("div").fadeOut(600, function(){
          $(this).remove();
          });
          return false;
      });
  </code></pre>