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 onclick="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 onclick="navHide();">收起<span class="change-icon"><img src="private/img/mine/hide.png"/></span></button>')
    }
</script>