web-dev-qa-db-ja.com

アニメーションでクリックのdivの高さを変更する

Divをクリックすると高さが変わるdivを使用してギャラリーを作成しようとしています。理想的には、これにはdivの高さを滑らかに拡大するアニメーションが含まれます。各ページには各divがいくつかあるので、そのセクションを展開するだけです。

実際には、このページのニュースセクションのようなものが判明するはずです。 http://runescape.com/

できればJavaScript/jQueryでやりたいです。

javascriptjqueryhtmlresize
13
JacobTheDev
$('div').click(function(){
    $(this).animate({height:'300'})
})

http://jsfiddle.net/tJugd/ で実際の例を確認してください

19
Hussein

これが私が最終的に使用したコードです：

JS：

document.getElementById("box").addEventListener("click", function() {
    this.classList.toggle("is-active");
});

CSS：

#box {
    background: red;
    height: 100px;
    transition: height 300ms;
    width: 100px;
}

#box.is-active {
    height: 300px;
}

HTML：

<div id="box"></div>

フィドル：

https://jsfiddle.net/cp7uf8fg/

7
JacobTheDev

試す

$('div').toggle(function(){
    $(this).animate({'height': '100px'}, 100);
}, function(){
    $(this).animate({'height': '80px'}, 100);
});

[〜＃〜] demo [〜＃〜]

2
qwertymk

jQueryルール。これをチェックしてください。

http://api.jquery.com/resize/

2
Trevor Arjeski

私はこれが古いことを知っていますが、誰かがここで自分の道を見つけたと思われる場合。 @JacobTheDevの回答は素晴らしく、jQueryがありません！ cssクラスをトグルするのと同じ時点でイベントが割り当てられていない場合のユースケースにもう少し追加しました。

HTML

<div id='item' onclick='handleToggle()'> </div>

JS

handleToggle(event){    
  document.getElementById(event.target.id).classList.toggle('active')
}

CSS

#item {
  height: 20px;
  transition: 1s;
}

.active {
  height: 100px;
}
0
bazinga

完全なソリューション：

スペーサーDIVとコンテンツDIVのマージンまたはパディングの両方が機能しますが、スペーサーDIVを使用することをお勧めします。

次に、CSSファイルでレスポンシブデザインを適用できます。 Javaを使用すると画面がちらつくため、これはかなり良いです！グリッドシステムを使用している場合は、設定を含める必要があるメディアクエリパーツがあります。

HD画面では少しスペーサーを使用していますが、モバイル画面まで増加しています。

それでも、ヘッダーにパンくずリストがある場合、複数行が扱いにくくなる可能性があるため、Javaを使用するのが最善ですが、高速応答のために延期します。アニメーションは、画面のちらつきを取り除くためのものであることに注意してください。

これはJavaの場合、ブレッドクラムが非常に長い場合にのみ発生します。それ以外の場合、グリッドを介して適用される単一のCSSはまったくちらつきません。Javaエレガントなアニメーションを介して

var header_height = $('#fixed_header_div').height();
var spacer_height = $('#header_spacer').height() + 5;    

if (header_height > spacer_height) {
    $('#header_spacer').animate({height:header_height});
};

5pxの許容差を適用したことに注意してください！

これは役に立ちます:-)

0
user3649978