使用動畫更改div高度onclick

Question

我正在嘗試使用div來創建一個庫，當你點擊它們時會改變它們的高度。 理想情況下，這將包括平滑擴展div高度的動畫。 每個頁面上會有幾個div，因此只需要展開該部分。

它實際上應該是這個頁面上的新聞部分： http ： //runescape.com/

如果可能的話，我想用JavaScript / jQuery做。

Answer 1

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

查看http://jsfiddle.net/tJugd/上的工作示例

Answer 2

這是我最終使用的代碼：

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/

Answer 3

嘗試

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

DEMO

Answer 4

jQuery規則。 看一下這個。

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

Answer 5

完整的解決方案：

內容DIV上的間隔DIV和邊距或填充都有效，但最好還是有間隔DIV。

然后可以在CSS文件中將響應式設計應用於它。 隨着JAVA屏幕閃爍，這變得更好！ 如果您使用網格系統，則需要在其中包含媒體查詢部分以包含您的設置。

我在高清屏幕上使用一個小間隔，而它增加到移動屏幕！

仍然如果你在標題中有多個行的痕跡可能是棘手的，所以最好有一個java但延遲速度resons。 請注意，動畫是為了擺脫屏幕的閃爍。

然后，只有當痕跡很長時才會觸發此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的容差范圍！

這有助於:-)

Answer 6

我知道這是舊的，但如果有人似乎在這里找到他們的方式。 @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;
}