テキストの表示/非表示時にスムーズに遷移する方法

記事の短い説明と完全な説明を切り替える必要があります。実際に私は、このマークアップテキストの表示/非表示時にスムーズに遷移する方法

<div class="post-content"> 
<p class="corta">Antonio Colombo Contemporary Art and Atelier Biagetti, have the honour to present&nbsp;a</p> 
<span class="points" >...</span> 
<br /> 
<span style="display:none" class="completa">Here i have the full description 
</span> 
<a style="width:auto;" class="link readLess" href="#">read more</a> 
</div>

を持っており、これは

$('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(); 
    } 

});

をJSこれは[OK]を動作しますが、IDは、むしろ短いと長い説明の間のスムーズな移行を持っています。何をお勧めしますか？私は、マークアップを変更したり、あなたの代わりに遅いの期間を使用することができます

ここフィドルhttp://jsfiddle.net/ycdBH/

出典

2012-03-06 Nicola Peluchetti