animate使用height:auto无效果

今天在做响应式的时候，想用Qquery中的animate() 来实现slideToggle()的上拉下滑的效果。

代码大致是这样的：

//.pageNav_btn为触发块
//.pageNav_close 关闭标签
//.pageNav_item 上拉下滑块

  $(".pageNav_btn").click(function(event) {

     if($(this).hasClass("pageNav_close")){
      
       $(".pageNav_item").animate({"height":0},400);
       $(this).removeClass("pageNav_close");
     
     }else{ 

       $(".pageNav_item").animate({"height":"auto"},400);
       $(this).addClass("pageNav_close") ; 

     }
  });

<h3>然并卵！</h3> <h5>没有实现下拉效果</h5>

<h6>所以就开始找原因：</h6>

使用火狐浏览器审查元素看到第一次加载是这样的:

首次加载

第一次触发之后

第一次触发事件

第二次触发的时候

第二次触发事件

由此可见，animate()其实是有执行的， 查询了一下W3chool，animate()中的styles参数是支持height属性的，只是height需要有一个确切的值，但个人认为 “auto” animate不识别。
所以我们在height这里给一个确定的值就OK了。

那么问题就来了，如果有固定的高度值我们干嘛还要用 height:auto;
这里肯定是一个未知的高度值，所以我们还得获取未来高度值，然后再来执行 animate；

所以贴上代码

定义容器现在的高度值值，以及将来的高度值；

var JoinFisher = $(".join"),
    currentHeight = JoinFisher .height(),
    autoHeight = JoinFisher .css('height', 'auto').height();
JoinFisher .height(currentHeight ).animate({height: autoHeight}, 1000);

所以将上面代码完成
 $(".pageNav_btn").click(function(event) {

     if($(this).hasClass("pageNav_close")){
      
       $(".pageNav_item").animate({"height":0},400);
       $(this).removeClass("pageNav_close");
     
     }else{ 

       $(".pageNav_item").animate({"height":"auto"},400);
       $(this).addClass("pageNav_close") ; 

     }
  });