質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • jQuery

    6914questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

jQuery「もっと読む(ReadMore)」の「…(3点リーダー)」付アニメについて

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 4,028

r_iida

score 70

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


<実現したい動き>
1. テキストのある程度の所(4行程度)以降を「…(3点リーダー)」で省略し、その下に「続きを読む」を表示。

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になるようカスタマイズを試みたのですが、うまくいかず。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

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);
});

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/29 15:26

    ありがとうございます!

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

    キャンセル

  • 2015/06/29 17:36

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

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

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

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

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/27 14:05

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

    キャンセル

  • 2015/06/29 15:25 編集

    ありがとうございます!

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

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

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

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

    キャンセル

関連した質問

同じタグがついた質問を見る

  • jQuery

    6914questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。