jQuery中animate方法将元素的height属性从其它值过渡到auto

正常思路

jQuery中想要用animate方法将元素的height属性从其它值过渡到auto值，首先想到的就是:

$(this).animate({height:'auto'}, 300);

但是并不起作用。

解决办法

这时需要换一种方法，思路是：

• 首先定义变量将当前的高度值保存下来。

var curHeight = $(this).height();

• 将元素高度临时改变为auto。

$(this).css('height', 'auto');

• 获取height为auto时的高度值

var autoHeight = $(this).height();

• 执行动画，将curHeight 过渡到 autoHeight。

$(this).height(curHeight).animate({height: autoHeight}, 300);

• 归纳整合如下

var el = $(this),
curHeight = el.height(),
autoHeight = el.css('height', 'auto').height();
el.height(curHeight).animate({height: autoHeight}, 300);

所有用于动画的属性必须是数字的

demo

<ul class="tab_ul">
    <li><div class="on">全宅照明</div></li>
    <li><div>家庭影音</div></li>
    <li><div>智能门窗</div></li>
    <li><div>安防监控</div></li>
    <li><div>电器控制</div></li>
    <li><div>环境优化</div></li>
    <li><div>健康养生</div></li>
    <li><div>主机</div></li>
    <li><div>智能单品</div></li>
</ul>

<script>
    function navHide(){
        $(".tab_ul").animate({height:'52px'});
        $(".change").html('<button οnclick="navShow();">展开<span class="change-icon"><img src="private/img/mine/on.png"/></span></button>')
    }
    function navShow(){
        var test=$(".tab_ul").css('height', 'auto').height();
        var h = test + 'px';
        console.log(h)
        $(".tab_ul").animate({height:'h'});
        $(".change").html('<button οnclick="navHide();">收起<span class="change-icon"><img src="private/img/mine/hide.png"/></span></button>')
    }
</script>