jquery か javascript での質問です。


スペースを有効利用するために、項目をクリックすると、項目の囲いがスライドされ、overflow: hidden な部分が表示される効果を考えています。
現在暫定的に、画面を見ながら拡大される量を調節していますが、以下のようなことはできないでしょうか。

<div id="div" style="width:50px; height:1em; overflow:hidden;">
項目1<br />
<p>なんちゃらかんちゃら、いろいろかいてあります。<br />
例えば途中で<img src="img/img.jpg" />とかもあったりします。=中略=</p>
</div>

例えば overflow の値として、overflow していたら、true、 していなかったら false、 のように返ってきて、jQuery の animate の効果のように、false になるまで、項目の囲いが伸び続ける、というもの。


表示がテキストだけのものは、文字数をカウントしたり、<br />を数えたりして、おおまかな height を割り出して animate させていますが、もっと共通化できればと考えています。

回答の条件
  • 1人2回まで
  • 登録:2009/10/30 13:34:24
  • 終了:2009/10/31 07:23:47

ベストアンサー

id:Mars No.1

Mars回答回数203ベストアンサー獲得回数202009/10/30 15:56:25

ポイント100pt

基本的にはheightにautoを実際に設定してみて値を採ってしまえばいいかと思います。

共通部品化みたいな事は全然してませんが、サンプルコードです。

<head>
<style type="text/css">
#div {
border:solid 1px red;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#div').click(function(){
		var H1 = $(this).height();// 現在の高さ
		$(this).css('height','auto');// 'auto'に仮設定
		var H2 = $(this).height(); // 'auto'の場合の高さ
		$(this).css('height',H1+'px'); // 現在の高さに戻す
// 高さの設定を何度もやってますが、流れの中での変更なので最後のアニメーション以外はレンダリングに影響しない(はず)
		$(this).animate({height:H2});// アニメーション
	})
});
</script>

</head>
<body>

<div id="div" style="width:50px; height:1em; overflow:hidden;">
項目1<br />
<p>なんちゃらかんちゃら、いろいろかいてあります。<br />
例えば途中で<img src="img/img.jpg" />とかもあったりします。=中略=</p>
</div>

</body>

id:AKI-NAMI

早い回答ありがとうございます。

表示する中身が大きいと、読み込みが遅いと一瞬全体が表示されそうな気もしますが、いただいたサンプルではスムーズに動きました。

実際に値をとるというのは一番確実な方法ですよね。。。

すみませんが、もう少しすっきり感が欲しいので、他の方の回答を待ちたいと思います。

2009/10/30 17:53:51
  • id:Mars
    >読み込みが遅いと一瞬全体が表示されそうな
    実画面の書き換えはjavascriptパーサから離れる時(?)に実施されるようなのでその心配は基本的に無いかと思います。
    スクリプトの実行最中、ステップ毎、値が変わるたびに再描画してたんじゃチラついてしょうがないはず - 途中で割り込み等が入らない事が前提ですが通常は最終結果だけが描画されると考えていても大丈夫だと思います。

    http://blog.livedoor.jp/dankogai/archives/50637906.html
  • id:AKI-NAMI
    >Mars様
    先ほど自分で重ためのもの?で試してみましたが、初回表示でもなめらかに動きました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません