How to have a smooth transition when showing / hiding text
<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>
