jQuery中实现不定高度height属性过渡为auto的animate动画

jQuery中想要用animate方法将元素的height属性从其它值过渡到auto值，首先想到的就是
JavaScript代码
$(this).animate({height:'auto'}, 300);
但是并不起作用。
这时需要换一种方法，思路是：
1、首先定义变量将当前的高度值保存下来。
JavaScript代码
var curHeight = $(this).height();
2、将元素高度临时改变为auto。
JavaScript代码
$(this).css('height', 'auto');
3、获取height为auto时的高度值。
JavaScript代码
var autoHeight = $(this).height();
4、执行动画，将curHeight 过渡到 autoHeight。
JavaScript代码
$(this).height(curHeight).animate({height: autoHeight}, 300);
连起来就是：
JavaScript代码
var el = $(this),
curHeight = el.height(),
autoHeight = el.css('height', 'auto').height();

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

 所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能。 

 比如两个位置 初始高度记录为curHeight  auto的高度记录为autoHeight 执行动画 将curHeight 过渡到 autoHeight。

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>