[JavaScript] [原创]  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);

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

版权声明：本文为原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
本文链接：https://www.qwqoffice.com/article.php?mod=view&tid=15
回复

发表您的留言