Question

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.

Answer 1

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