在jQuery中切換div的高度

Question

這個問題已經解決，但沒有一個解決方案對我有用。

我在前面的問題中提到了同樣的問題 ：

我注意到其中一個響應給了這個jsfiddle鏈接 ，它實現了我想要的確切功能，並且有效。

    $("#topbar").toggle(function(){
      $(this).animate({height:40},200);
    },function(){
      $(this).animate({height:10},200);
    });

但是當我將框架更改為除jQuery 1.4.4之外的任何內容時，div會在頁面加載后立即消失。 這是我在自己的項目中遇到的問題。

關於如何讓jsfiddle在jquery 2.x上工作的任何想法？ 我錯過了什么？

Answer 1

修復很簡單：

$("#topbar").toggle(function () {
    $(this).animate({
        height: "40px"
    }, 200);
}, function () {
    $(this).animate({
        height: "10px"
    }, 200);
});

您只需要將px單位添加到高度值。

請參閱演示： http ： //jsfiddle.net/audetwebdesign/3dd3s/

PS

其他一些已發布的答案顯示了一種更好的編碼此類動畫的方法。 我只是演示了如何修復bug。

請注意，從jQuery 1.8開始，不推薦使用.toggle 。
參考： http ： //api.jquery.com/toggle-event/

為何需要該單位

其他一些解決方案涉及jQuery .height()函數，它返回一個無單位像素值。 在這種情況下，計算值被強制/強制轉換為像素值，因此不需要'px`單位。

在原始示例中，未使用.height()函數，因此需要指定單元才能使其工作。

Answer 2

jQuery的

$("#topbar").click(function () {
    $(this).animate({
        height: ($(this).height() == 40) ? 10 : 40
    }, 200);
});

CSS

#topbar {
    background: orange;
    color: white;
    display:block;
    width:100%;
    text-align:center;
    height:40px;
}

HTML

<div id='topbar'>toggle me</div>

的jsfiddle

Answer 3

這是你想要的嗎？

http://jsfiddle.net/mmDCk/

$("#topbar").click(function() {
    $(this).animate({
        height: ($(this).height() == 10) ? 40 : 10
    }, 200);
});

這將根據目前的情況將高度切換到40或10。