I have a mysterious problem:

<div class="ttbl0" id="msg0">Messages</div>

$(data).hide().fadeIn(1000).insertAfter("#msg0");

data in this case are:

<div class="kld0"> <div class="mbx24"> <div class="wlls-t"> <div class="row1">test1</div> <div class="row2">test2</div> <div class="row3">test3</div> </div> </div> </div>

It works fine and inserts data after msg0 container with fadeIn effect. The problem is that after data finishes fading in, the container msg0 do the same - it disappears and appears again with fadein effect.

I tried it with append function but have the same problem - container msg0 disappears and fades in. There are no unclosed tags that may cause this problem.

It happens not only with one container. If I create more:

<div class="ttbl0" id="msg0">Messages</div> <div class="ttbl0">Messages</div> <div class="ttbl0">Messages</div> <div class="ttbl0">Messages</div>

all of them disappear and fade in.

.ttbl0 { width: 759px; font-weight: 700; padding: 10px; float: left; border-left: 1px solid #c4c4c4; border-right: 1px solid #c4c4c4; } $(document.body).on('submit','#sendmessage',function() { var str = $(this).serialize(); $.ajax({ type: "POST", url: "/send.php", data: str, success: function(data) { $(data).hide().fadeIn(1000).insertAfter("#msg0"); } }); return false; });