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

发布于 2024-11-01 23:48:16 字数 586 浏览 1 评论 0原文

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

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

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

文本发生变化的原因是 ajax 从数据库获取不同的反馈条目。请参阅此问题了解更多信息。

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

编辑：

请参阅此网站，我正在其中进行测试。正如您所看到的，当 p 标签隐藏并再次显示时，反馈框 div 会跳跃。

原文

This may be a noob question but I want to hide the content within the P tag (.feedback-text), without the height of the div (.feedback-box) changing.

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

The p tag will have different lengths of text within it, but I do not want the div it from sliding up/down with it. The div must stay the same size unless the text it larger or smaller than before.

The reason why the text is changing is because ajax is getting different feedback entrys from a database. See this question for more information.

I hope I have made this clear. Thanks.

EDIT:

Please see this website, where I'm doing my tests. As you can see the feedback-box div is jumping around when the p tag is hidden and shown again.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

如梦亦如幻 2024-11-08 23:48:16

只需设置不透明度的动画即可。这使得该元素不可见，但仍然存在：

$('.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();
 });

Just animate the opacity. This makes the element invisible, but still there:

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

Your JS code seems a bit fishy. Try replacing it with this:

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();
 });

回复收藏 0 原文