CSS - jQuery hiding/showing div changing height

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.

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

You could set the css property:

visibility:hidden;

Is this what you want?

As I see it (and understand it, which I'm not sure I do), you have three options:

• Set a fixed height on your parent div, and use the css overflow-y:auto to scroll if it gets too big.
• use visibility:hidden; on the child
• animate the opacity. It'll still be there.