jQuery中实现不定高度height属性过渡为auto的animate动画
2018-05-02 10:13
375 查看
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的效果。
阅读更多
相关文章推荐
- jQuery中实现不定高度height属性过渡为auto的animate动画
- jquery 通过animate实现height: auto展开收缩动画
- 用js实现类似jquery里的animate动画效果
- js实现类似jquery里animate动画效果的方法
- 超实用的jQuery代码段 - jQuery实现Animate动画
- 利用jQuery的动画函数animate实现豌豆发射效果
- height为auto时候,如何用c3实现动画
- 不定高元素的高度transition动画实现
- jquery animate 不支持颜色动画属性扩展
- Jquery使用animate实现css3的transform动画效果
- jQuery用animate()方法实现简单动画效果
- height为auto,css3过渡动画问题
- 实现jQuery中的animate 的background-color 属性的改变
- 浅谈原生JS实现jQuery的animate()动画
- CSS3 如何让height:auto实现transition过渡效果
- jquery的animate动画效果函数用JS代码是如何实现的
- css3怎么实现高度从固定到自动的过渡动画?
- css3实现高度从固定到自动的过渡动画
- CSS3 如何让height:auto实现transition过渡效果