title: Add fading transition to items loaded via ajax
body: <p>I'm loading items containing information from some json files corresponding to the category I clicked on.</p>
  
  <p>Below is some simplified code :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var $grid = $('.grid'),
     $cat_link = $('.cat-list a');
  
  // on loading the page for the first time, I define the category to display as the first one
  $cat = 'cat-1';
  
  function getCardsList() {
   $.ajax({
    url: 'js/' + $cat + '.json',
    dataType: 'json'
   }).done(listSuccess);
  
   function listSuccess(data) {
      var $card_items = [];
    
    for (var i = 0; i &lt; data.length; i++) {
     var card_item = '&lt;div class="col"&gt;' + /*stuff from the json file*/ + '&lt;/div&gt;';    
     $card_items.push( card_item[0] );
    }
  
    $grid.append( $card_items ).addClass('is-loaded');
   }
  }
  
  // execute immediately the function on the first load
  getCardsList();
  
  $cat_link.on( 'click', function(e) {
   e.preventDefault();
  
   $cat = $(this).data('cat');
  
   getCardsList();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.col {
    float:left;
    width:25%;
    transform: scale(0.85);
    opacity: 0;
    transition: transform 0.2s, opacity 0.2s;
  }
  .is-loaded .col {
    transform: scale(1);
    opacity: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="cat-list"&gt;
   &lt;li&gt;&lt;a href="" data-cat="cat-1"&gt;Category 1&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="" data-cat="cat-2"&gt;Category 2&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="" data-cat="cat-3"&gt;Category 3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="grid"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now I would like to add a transition to the divs that are appended to the grid. I tried hiding the element via CSS and then add a <em>.is-loaded</em> class to the grid to fade them in, in the success function, but since they're immediately appended to the grid, the transition doesn't work. Also tried adding a <strong>beforeSend</strong> parameter to the ajax call to hide the items beforehand but with no luck.</p>
  
  <p>If I use a basic <strong>$('.grid .col').show()</strong> or <strong>.fadeIn()</strong> after appending the items, it works, but it's not the animation I want. Cannot use <strong>.animate()</strong> either since it's only animating numeric values.</p>
  
  <p>I tried adding the <em>.is-loaded</em> class in the click event after the call to the function but it still doesn't work.</p>
  
  <p>I feel very stupid but just can't figure how to do this, even though it seems so obvious. Thanks for any help.</p>
  
  <p>Edit : here is a <a href="http://enora.josse.free.fr/reco/" rel="nofollow noreferrer">link</a> to the (unfinished) online version. You will totally laugh looking at my script, I'm a self-taught JS noob.</p>