动画高度:自动与较新的jQuery

Animate to height:auto with newer jQuery

本文关键字：jQuery 高度 动画      更新时间：2023-09-26

我设置了一对<div>元素，这样当一个<div>被单击时，另一个动画到适合其内容的高度。

脚本通过临时将高度切换为auto，测量它，然后切换回样式表高度(为零)来实现这一点。

它工作得很好，但只有jQuery 1.4.4，这是相当旧的。每当我尝试添加一些需要更新版本的内容时，动画就会停止工作，要么根本不动画，要么两个元素都消失了。

我在下面创建了一个JSFiddle。这个版本的jQuery甚至没有在库中列出，所以我不得不从外部链接它(在左侧的外部资源下)。如果您删除它并将库设置为最低可用，您就会明白我的意思。

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>

是否有一种方法可以让我更新它以避免冲突?

试试: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);    
});
});

toggle函数用于显示/隐藏所选元素(s)从选择器，而你使用作为$("#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/

相关文章：