动画到高度：自动使用更新的jQuery

Question

我设置了一对<div>元素，这样当单击一个<div> ，另一个为其内容设置适当的高度。

该脚本通过暂时将高度切换为auto，测量它，然后切换回样式表高度（为零）来完成此操作。

它工作正常，但只有jQuery 1.4.4，这是相当古老的。 每当我尝试放入需要更新版本的东西时，动画就会停止工作，或者完全没有动画或者两个元素都消失了。

我在下面制作了一个JSFiddle。 这个版本的jQuery甚至没有列在库中，所以我不得不在外部链接它（在左边的External Resources下）。 如果删除它并将库设置为最低可用库，您将看到我的意思。

https://jsfiddle.net/27sr4kzv/1/

这是代码：

<script type="text/javascript">//<![CDATA[ 
    $(function(){
        var el = $('#ev-donate-form'),
            curHeight = el.height(),
            autoHeight = el.css('height', 'auto').height();
            el.height(curHeight);
        $("#ev-sponsors").toggle(function(){
            el.height(curHeight).animate({height: autoHeight}, 400);
        },function(){
            el.height(autoHeight).animate({height: curHeight}, 400);
        });
    });
//]]>
</script>

有没有办法我可以更新这个以避免冲突？

Answer 1

试试这个： https ： //jsfiddle.net/27sr4kzv/16/

$(function(){
  var el = $('#omgivebeenclicked'),
      curHeight = el.height(),
      autoHeight = el.css('height', 'auto').height();
        el.height(curHeight);


$( "#clickme" ).click(function() {     
    if(el.height() == 0)
        el.height(curHeight).animate({height: autoHeight}, 400);
    else
      el.height(autoHeight).animate({height: curHeight}, 400);    
});
});

Answer 2

toggle功能用于显示/隐藏选择器中的选定元素，当您使用$("#clickme").toggle ，您只需显示/隐藏#clickme元素，在http上阅读更多内容：//api.jquery.com/toggle/

您可能想要使用的是.on("click", function () { ...; }); 为它（ http://api.jquery.com/on/ ）

以下修订后的JS实现了效果：

$(function(){
  var el = $('#omgivebeenclicked'),
    IsShown = false,
      curHeight = el.height(),
      autoHeight = el.css('height', 'auto').height();
        el.height(curHeight);
  $("#clickme").on("click", function(){
    el.height(IsShown ? autoHeight : curHeight).animate({
        height: IsShown ? curHeight : autoHeight
    }, 400);
    IsShown = !IsShown;
  });
});

演示： https ： //jsfiddle.net/27sr4kzv/13/