Javascript 使用jquery切换获取可折叠面板的问题

我对jquery切换函数有意见

贝娄我已附加演示链接

jquery代码-

$(document).ready(function(){
    $('.collapsBTN').toggle(
        function () {
                $(".rhs_container").css({'display':'none'});
                $('.rhs').animate({width: "20"});
            },
        function () {
                $(".rhs_container").css({'display':'block'});
                $('.rhs').animate({width: "295"});
            }
    );
});

问题- 若我们点击collaps按钮（如上面给定的链接中所示的粉红色），切换功能可以正常工作，但按钮在设置宽度动画时消失。它应该是可视的动画

---

有人能解决这个问题吗？

如果您使用的是html 5和css3，那么下面的方法会更好：

<script>
    $('.collapsBTN').click(function () { 

       $('.rhs_container).toggleClass('change-size');
   });

</script>

<style>
  .rhs{
       -webkit-transition: width 1.5s linear ;
       -moz-transition: width 1.5s linear ;
       transition: width 1.5s linear ;
   }

   .change-size {
       width: 20px;

   } 

  .change-size  .rhs_container{
       display:none;
   }

$（'.collapsBTN'）。单击（函数（）{
$（'.rhs_container）.toggleClass（'change-size'）；
});
.rhs{
-webkit过渡：宽度1.5s线性；
-moz过渡：宽度1.5s线性；
过渡：宽度1.5s线性；
}
.改变尺寸{
宽度：20px；
} 
.更改大小。rhs_容器{
显示：无；
}

---

否则，请使用jquery检查简单解决方案。问题是，当jquery在宽度上设置动画时，它会使

溢出：隐藏
样式。不过，这一条可行：
F.Y.I.jQuery的函数作为1.9版的一部分，因此我使用1.8.2版。或者还有其他方法可以做到这一点吗？