title: How to have a smooth transition when showing / hiding text
body: <p>I need to switch between the short and the full  description of an article. Actually i have this markup</p>
  
  <pre><code>&lt;div class="post-content"&gt;
  &lt;p class="corta"&gt;Antonio Colombo Contemporary Art and Atelier Biagetti, have the honour to present&amp;nbsp;a&lt;/p&gt;
  &lt;span class="points" &gt;...&lt;/span&gt;
  &lt;br /&gt;
  &lt;span style="display:none" class="completa"&gt;Here i have the full description
  &lt;/span&gt;
  &lt;a style="width:auto;" class="link readLess" href="#"&gt;read more&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this js </p>
  
  <pre><code>$('div.post-content').delegate("a", "click", function(e) {
      e.preventDefault();
      var div = $(this).closest('div');
      var points = div.find('.points');
      var complete = div.find('.completa').html();
      var corta = div.find('.corta').html();
      div.find('.corta').html(complete);
      div.find('.completa').html(corta);
      var $this = $(this);
      if ($this.hasClass('readMore')) {
          $this.text("read less");
          $this.addClass('readLess').removeClass('readMore');
          points.show();
      } else {
          $this.text("read more");
          $this.addClass('readMore').removeClass('readLess');
          points.hide();
      }
  
  });
  </code></pre>
  
  <p>This works ok, but id rather have a smooth transition between the short and long description. What would you suggest?
  I could change the markup or use a jQuery plugin if neded</p>
  
  <p>Fiddle here <a href="http://jsfiddle.net/ycdBH/" rel="nofollow">http://jsfiddle.net/ycdBH/</a></p>