人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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 させていますが、もっと共通化できればと考えています。

●質問者: AKI-NAMI
●カテゴリ:ウェブ制作
✍キーワード:animate JavaScript jQuery Overflow かんち
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Mars
●100ポイント ベストアンサー

基本的には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>

◎質問者からの返答

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

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ