CSS - jQuery 隐藏/显示 div 改变高度答案

【问题标题】：CSS - jQuery hiding/showing div changing heightCSS - jQuery 隐藏/显示 div 改变高度
【发布时间】：2011-08-07 01:58:47
【问题描述】：

这可能是一个菜鸟问题，但我想隐藏 P 标签（.feedback-text）中的内容，而不改变 div（.feedback-box）的高度。

<div class="feedback-box">
    <p class="feedback-text"></p>
</div>

p 标签内会有不同长度的文本，但我不希望 div 与它一起向上/向下滑动。 div 必须保持相同的大小，除非文本比以前更大或更小。

文本发生变化的原因是 ajax 从数据库中获取不同的反馈条目。有关详细信息，请参阅this 问题。

我希望我已经说清楚了。谢谢。

编辑：

请参阅this website，我正在那里进行测试。正如你所看到的，当 p 标签被隐藏并再次显示时，反馈框 div 正在跳跃。

【问题讨论】：

查看molossi.co.uk/new102/feedback后发现有一些bug。在动画完成之前不要更改文本。更新文本并重新激活。
谢谢，它们是什么错误？他们是什么原因造成的？我看不出它有任何问题。
Levi，你现在能不能看一下，在我按照你说的做之后，它似乎正在发挥作用：/
嗯......它对我有用......你看到了什么问题？另外，你用的是什么浏览器？
实际上，将您的代码移动到成功。除非您得到成功的响应，否则您不想制作动画，对吧？

标签： jquery css height

【解决方案1】：

你可以设置css属性：

visibility:hidden;

这是你想要的吗？

【讨论】：

不，这只是完全隐藏了它，它的内容在里面：/
或者设置“opacity:0;”

【解决方案2】：

只需为opacity 设置动画。这使元素不可见，但仍然存在：

$('.feedback-text').animate({opacity: 0}, 500);

您的 JS 代码似乎有点可疑。尝试用这个替换它：

function get_feedbackb() {
   $.post({url: 'feedback.php', function(data) {
     $('.feedback-text').stop().animate({opacity: 0}, 1000, function() {
       $(this).html(data);
       $(this).stop().animate({opacity: 1}, 3000);
     });
   });

   setTimeout(get_feedback(), 4000);
 });

$(document).ready(function(){
   get_feedback();
 });

【讨论】：

没问题。在你玩弄 jQuery 一段时间后，你会想起这样的小事 ;)
它现在正在播放，它弄乱了不透明度并显示下一个反馈到早期：/ lol
嗯，您如何显示反馈？另外，我会使用$('.feedback-text').stop().animate({opacity: 0}, 500);，因为它会在调用时停止上一个动画。也许这至少能解决一些问题。

【解决方案3】：

在我看来（并理解它，我不确定我是否这样做），你有三个选择：

在您的父 div 上设置一个固定高度，如果它太大，请使用 css overflow-y:auto 滚动。
对孩子使用visibility:hidden;
为不透明度设置动画。它仍然会在那里。

【讨论】：

Think Blender 找到了我的解决方案，jQuery animate :) 还是谢谢

【解决方案4】：

可能有更好的方法来做到这一点，但请尝试检查一下

jsfiddle

【讨论】：