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

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

JavaScript代码

复制

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

但是并不起作用。

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

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

JavaScript代码

复制

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

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

JavaScript代码

复制

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

3、获取height为auto时的高度值。

JavaScript代码

复制

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

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

JavaScript代码

复制

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

连起来就是：

JavaScript代码

复制

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

这样就实现了高度从其它值过渡到auto的效果。