Question

这个问题已经解决，但没有一个解决方案对我有用。

我提到this earlier question addressing the same problem：

我注意到其中一个回复给了this jsfiddle link，它实现了我想要的确切功能，并且有效。

    $("#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。

在jQuery中切换div的高度

3 个答案:

为什么需要单位