animate(height:"auto")不起作用问题解决

最新推荐文章于 2024-03-15 11:23:16 发布
最新推荐文章于 2024-03-15 11:23:16 发布
阅读量436 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/senn0213/p/9180215.html
本文介绍了一种简单的文本展开收起效果实现方法。通过在div下方添加按钮，并使用JavaScript来获取文本完全展开时的高度，进而实现div高度的动态调整。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题是：我现在先固定div的高度，里面的文本如果超过这个高度，超过的部分隐藏，点击【展开】按钮，div的高度会变成文本全部展开的高度，说白了就是类似网易云网页的歌词显示

 

 

如图所示，实现起来其实很简单，

在div下面价格button，然后用js获取文本全部展开时的高度，然后吧animate(height,正常高度)即可

 

转载于:https://www.cnblogs.com/senn0213/p/9180215.html

jquery 通过animate实现height: auto展开收缩过渡动画 height：auto过渡动画 animate
王敬辉的博客
10-09 1375
当点击展开时，获取元素height: auto的高度为多少像素，判断布尔值，由当前高度到height:auto的过渡或由height:auto到设置高度的过渡； 需要引进jquery； javascript filter(); function filter(){ var xbool=[true,true,true];//定义数组 存放布尔值情况 $(...
jquery 升级后，高度自适应height auto失效
hakey_new的博客
06-17 632
jquery从 1.11.**升级到1.12.**后 ，jquery的animate()方法中设置属性height:"auto"失效了。 解决办法：
jquery 通过animate实现height: auto展开收缩动画
yumihe
08-27 4206
 实现原理：当点击展开时，获取元素height: auto的高度为多少像素，由当前高度到height:auto的过渡；反之。 var m_flag = true; var el = $(".case-detail-con"), curHeight = el.height(); $("#casesdetail_more").click(function(){ if(m_flag){ ...
animate函数无法识别height:auto属性
smiling_pangyang的博客
08-29 1179
今天遇到一个问题，在进行展开/折叠动画效果时，发现用animate函数不识别height:auto,具体代码如下： $(document).ready(function () { $(".flip").click(function () { if($(this).hasClass("btn-close")){ $(this).removeClass("btn-close"); $("di...
jQuery中实现不定高度height属性过渡为auto的animate动画
黎成诃月的博客
01-17 6082
jQuery中想要用animate方法将元素的height属性从其它值过渡到auto值，首先想到的就是 JavaScript代码 $(this).animate({height:'auto'}, 300); 但是并不起作用。 这时需要换一种方法，思路是： 1、首先定义变量将当前的高度值保存下来。 JavaScript代码 var curHeight = $(this).height(
【Auto.js悬浮窗FAQ集合】：开发常见问题与解决方案，提升开发效率
# 1. Auto.js悬浮窗的基本概念和框架解析 ## 1.1 Auto.js悬浮窗的起源和发展 Auto.js是一个基于JavaScript的Android自动化脚本工具，它允许用户...悬浮窗在Auto.js中的作用主要体现在两个方面：第一，为用户提供一
JS 流行库（六）：Animate
0lonely0
09-28 1016
JS 流行库（六）：Animate
Fullpage.js底部高度自定义fp-auto-height样式无效的解决方案
老蔡学代码
01-23 5384
近期用到Fullpage.js．底部不需要整屏，搜了很多．都说在底部区域加上fp-auto-height这个ＣＳＳ样式即可．试了一下不行． 终极解决办法： HTML部分: CSS部分： #section-footer{ background:#212020; } #section-footer #footer-text{ height: 15
原生js仿jquery animate动画效果
01-19
jquery animate动画效果：   代码 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>动画</title> <style> *{margin:0;padding:0;} .box{width:...
jq获取元素进行高度更改自适应并有过度动画 animate但height: auto不生效问题处理。
最新发布
threedeformity的博客
03-15 648
jq获取元素进行高度更改并有过度动画，使用animate赋值 auto 或者 fit-content 发现不生效。可以通过jq获取元素高度，然后通过animate赋值数值进行实现高度自适应展开动画。
css height:auto 不起作用,animate使用height:auto无效果
weixin_35174422的博客
08-04 986
今天在做响应式的时候，想用Qquery中的animate() 来实现slideToggle()的上拉下滑的效果。代码大致是这样的：//.pageNav_btn为触发块//.pageNav_close 关闭标签//.pageNav_item 上拉下滑块$(".pageNav_btn").click(function(event) {if($(this).hasClass("pageNav_close...
css设置height 由0到auto的动画效果
热门推荐
anyEmpty的博客
12-29 1万+
css设置height 由0到auto的动画效果分析
【实用随记】height:auto时无法执行动画的解决办法
mercury8862的专栏
04-15 2768
加到body里 然后   $('.trangle').bind('click',function(){         $(this).toggleClass('tr-click');         $(this).parent('.folder-each').toggleClass('fo-click');         var el = $(this).pa
手动实现折叠面板效果，height:auto时，导致transition失效
alisa_csdn的博客
11-29 1435
height：auto，transition没有生效 2.此时，我们可以设置一个最大高度，max-height（超过你的内容高度的一个值，我这边设置为214px），此时我们发现展开已生效，但关闭的折叠效果没有生效 3.我们可以设置一个最小高度，min-height，这样折叠面板的功能就实现了，一起试试吧 ...
animation动画不生效_关于animation动画不执行问题
weixin_36436683的博客
12-23 1922
我的需求是做一个砸金蛋功能，点击金蛋弹出modal ,这个modal是一个砸金蛋的动画。第一次执行这个点击事件触发这个事件没有问题，但是当我关闭这个modal再次打开 这个动画效果不触发了，求解答在这先谢过了，下面附上代码(点击事件触发下面弹框有定义了动画animationData，调用基础库是2.1.1)关闭金蛋模态框clickeggs: function () {this.setData({ ...
设置width不生效_CSS：你不知道的width:auto
weixin_39699912的博客
11-29 6544
width一个家喻户晓的属性，我们都知道它的默认值是auto，但是我们该怎么更好的使用width:auto呢？我们首先来看一下这个属性值的宽度表现：充分利用可用空间。如，<div>、<p>这些块级元素的默认宽度就是100%充满父容器的。自适应性。如，内联元素、table元素、绝对定位元素和浮动元素，由内容决定，将宽度收缩到一个合适的值。收缩到最小。如，table-layou...
Delphi多媒体编程：MediaPlayer属性与Animate控件
本资源主要介绍了在Delphi中使用多媒体控件MediaPlayer进行音频视频播放时的属性设置，以及如何利用Animate控件实现动画播放。详细讲述了Animate控件的基本功能、位置，以及如何在设计界面中添加和配置相关控件。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值