您的位置:首页 > Web前端 > JQuery

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

2018-05-02 10:13 375 查看
 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的效果。


阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: