title: Hide and then append data with jQuery
body: <p>By Clicking a link <code>.link</code>, I want to append a data data in a div <code>.list</code>. I want to set it initially hidden and then show it (to create a fading effect). I am trying following but it does not seem to do anything (neither I get any error). What's wrong with it?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="wrap"&gt;
      &lt;div class="box"&gt;
          &lt;div class="list"&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;a href="#" class="link"&gt;click me&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$('.link').click(function(e) {
      var wrap = $(this).closest('.wrap').find('.list' );
      var mydata = "test data";
  
      $(mydata).hide(1000, function(){                        
          $(wrap).append($(mydata));
          $(mydata).show(6000);
      });
  
  });
  </code></pre>
  
  <p><strong>JSFiddle Demo:</strong>
  <a href="http://jsfiddle.net/9z06nvh7/" rel="nofollow">http://jsfiddle.net/9z06nvh7/</a></p>