jQuery「もっと読む（ReadMore）」の「…（３点リーダー）」付アニメについて

Question

jQeryでReadMoreを実装したく、プラグインや自作をしてみたのですが、理想に近いところまではいきつつ、どうしても完成におよばず、皆様のお知恵を拝借いただければ嬉しいです。

＜実現したい動き＞

1. テキストのある程度の所（４行程度）以降を「…（３点リーダー）」で省略し、その下に「続きを読む」を表示。

2. 「続きを読む」をクリックすると「…」が消え、続きのテキストがアニメーションで表示される（slideDownの動き）。その下に「閉じる」が現れる。

3. 「閉じる」をクリックすると、SlideUpの動きで「1.」の状態に戻る。

＜自作jQuery＞
http://codepen.io/i_ryo/pen/PqEqmM
CSSのline-clamp（…）と、jQueryのanimationメソッドを組み合わせて書き、理想に近い動きが再現できたのですが、ネックになっているのがテキストの高さの指定です。
テキストによってボリュームが変わるため、実数で「height: "200px"」などと入れると、高さが合いません。ボリュームによる高さの取得する方法がわかればと思っていますが、うまくいかない状態です。

＜その他、試したプラグイン＞
自作する前に試したプラグインです。もしこちらに近道があれば、それでも解決になって嬉しいです。

・READMORE.JS
http://jedfoster.com/Readmore.js/
もっともシンプルかつ理想的な動きなのですが、「…」が付けられず。
http://stackoverflow.com/questions/536814/insert-ellipsis-into-html-tag-if-content-too-wide
こちらの質問にも「…」が実装ができない、というような回答が見られました。

・Collapser
http://www.aakashweb.com/demos/jquery-collapser/
いくつか用意されているモードの内、「characters（文字数）」モードは「…」が付くのですが、閉じる時にアニメーションになりませんでした。
「lines（行数）」モードはアニメは理想的な動きでしたが、「READMORE.JS」同様に「…」が付けられませんでした。

・jTruncSubstr
http://semooh.jp/jglycy/jquery-plugins/jtruncsubstr
「…」が付き、かつアニメーションという理想的な形でしたが、唯一残念なのは「続きを読む」で表示されるテキスト（class="truncate_more"）のCSSがdisplay:blockになり、そこから改行になってしまう部分です。
.truncate_moreがdisplay:inlineになるようカスタマイズを試みたのですが、うまくいかず。

Answer 1

animateする前にheightをautoに戻して実際の高さを取得後、再度高さを元に戻して
実際の高さにanimateするというのはいかがでしょうか。

但し.textで記述されているので.textが複数ある場合は$('.text')で指定せず
clickされた.moreの親から辿って該当の.textを探す必要はあるかと思います。

＜自作jQuery＞
http://codepen.io/i_ryo/pen/PqEqmM

変更部分

var h = $(".text").height();
$(".text").css({"display":"block","height":"auto"});
var hreal = $('.text').height();
$('.text').css({height:h+"px"})
.animate({
   height: hreal+"px"
 },300);

複数の.textクラスの場合は親からその中の.textを探すバージョンです。

$(".more").click(function(){
  $(this).css("display","none");
  var close = $(this).parents('div').find('.close');
  close.css("display","block");  
  var text = $(this).parents('div').find('.text');
  var h = text.height();
  text.css({display: "block", height: "auto"});
  var hreal = text.height();
  text.css({height: h+"px"});
  text.animate({
      height: hreal+"px"
   },300);
});

Comments

[r_iida]

ありがとうございます！

教えていただいた方法を試してみます。
またこちらにご報告いたします。

[r_iida]

＞複数の.textクラスの場合は親からその中の.textを探すバージョン
上記の方法にて、複数.textへの対応ができました。
ありがとうございました！

http://codepen.io/i_ryo/pen/QbaQrE

各テキストのボリュームに対応しており、また、セレクタの指定先を変えることで、
画像付きや入れ子ブロック付きにも対応できそうです。（３つ目の試作）

本当にありがとうございました。

Answer 2

こんな感じでいかがでしょうか？
http://codepen.io/anon/pen/Mwrjza

最初に全文の高さを取得し、その後で4行の...付きにする感じです。

Comments

[rossi46hiro]

あ、textをクラスにしてるってことは1ページ内で複数ある感じですかね
だとこれだとダメですね

[r_iida]

ありがとうございます！

ためしにテキストボリュームの違う３つに増やしたところ
高さになっていることを確認いたしました。
テキストの高さを取得する方法がわかり、嬉しく思います。
http://codepen.io/i_ryo/pen/aOEERp
（一つ目の高さが基準になっている？）

＞あ、textをクラスにしてるってことは1ページ内で複数ある感じですかね

おっしゃる通り、ニュースサイトやアマゾンレビューのようなイメージで、
記事が複数件が並んでおり、どのボリュームの記事も同じ高さで表示しつつ、
クリックするとページ推移なしに見たい記事だけ全文が表示される、
というような物を作りたく思っていました。

言葉が不足しており、失礼いたしました。