[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

发表您的留言